Merge pull request #98 from mrliptontea/backport-v2-fixes-to-v1.x

Backport v2 fixes to v1.x

.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 = 2

.jshintrc

@@ -1,23 +0,0 @@
-{
-    "camelcase"    : true,
-    "curly"        : true,
-    "eqeqeq"       : true,
-    "forin"        : true,
-    "indent"       : 4,
-    "latedef"      : true,
-    "newcap"       : true,
-    "nonew"        : false,
-    "quotmark"     : "double",
-    "undef"        : true,
-    "unused"       : true,
-    "strict"       : true,
-    "maxparams"    : 3,
-    "maxdepth"     : 3,
-    "maxstatements": 16,
-    "maxlen"       : 80,
-    "shadow"       : false,
-    "browser"      : true,
-    "jquery"       : true,
-    "globals"      : {
-    }
-}

.scss-lint.yml

@@ -18,20 +18,21 @@ linters:
     enabled: false
 
   Comment:
-    enabled: false
+    enabled: true
 
   DebugStatement:
     enabled: true
 
   DeclarationOrder:
-    enabled: false
+    enabled: true
 
   DuplicateProperty:
     enabled: true
+    ignore_consecutive:
+      - word-break
 
   ElsePlacement:
-    enabled: false
-    style: same_line
+    enabled: true
 
   EmptyLineBetweenBlocks:
     enabled: true
@@ -67,9 +68,9 @@ linters:
     filename_extension: false
 
   Indentation:
-    enabled: false
+    enabled: true
     character: space
-    width: 4
+    width: 2
 
   LeadingZero:
     enabled: true
@@ -94,6 +95,9 @@ linters:
     enabled: true
     extra_properties: []
 
+  PseudoElement:
+    enabled: true
+
   QualifyingElement:
     enabled: false
 
@@ -124,6 +128,12 @@ linters:
   SpaceAfterPropertyName:
     enabled: true
 
+  SpaceAfterVariableName:
+    enabled: true
+
+  SpaceAroundOperator:
+    enabled: true
+
   SpaceBeforeBrace:
     enabled: true
     style: space
@@ -140,8 +150,14 @@ linters:
   TrailingSemicolon:
     enabled: true
 
+  TrailingWhitespace:
+    enabled: true
+
   TrailingZero:
-    enabled: false
+    enabled: true
+
+  TransitionAll:
+    enabled: true
 
   UnnecessaryMantissa:
     enabled: true
@@ -154,3 +170,9 @@ linters:
 
   UrlQuotes:
     enabled: true
+
+  VendorPrefix:
+    enabled: true
+
+  ZeroUnit:
+    enabled: true

.travis.yml

@@ -0,0 +1,15 @@
+dist: trusty
+language: node_js
+node_js:
+  - 8
+cache:
+  directories:
+    - node_modules
+before_install:
+  - rvm install 2.2
+  - rvm use 2.2 --fuzzy
+install:
+  - gem install scss_lint
+  - npm install
+script:
+  - npm run lint --silent

Gruntfile.js

@@ -1,40 +1,51 @@
 module.exports = function (grunt) {
-
   grunt.initConfig({
-    src: "src/",
+    src: 'src/',
 
     sass: {
       options: {
+        implementation: require('node-sass'),
         sourceMap: false,
         outputStyle: 'compressed'
       },
-      dist: {
+
+      theme: {
         files: {
           'stylesheets/application.css': '<%= src %>sass/application.scss'
         }
       },
-      redmine_backlogs: {
-        files: {
-          'plugins/redmine_backlogs/global.css':
-            '<%= src %>sass/plugins/redmine_backlogs/global.scss',
-          'plugins/redmine_backlogs/master_backlog.css':
-            '<%= src %>sass/plugins/redmine_backlogs/master_backlog.scss',
-          'plugins/redmine_backlogs/statistics.css':
-            '<%= src %>sass/plugins/redmine_backlogs/statistics.scss',
-          'plugins/redmine_backlogs/taskboard.css':
-            '<%= src %>sass/plugins/redmine_backlogs/taskboard.scss',
-          'plugins/redmine_backlogs/jquery/jquery-ui.css':
-            '<%= src %>sass/plugins/redmine_backlogs/jquery/jquery-ui.scss',
-          'plugins/redmine_backlogs/jquery/jquery.multiselect.css':
-            '<%= src %>sass/plugins/redmine_backlogs/jquery/jquery.multiselect.scss',
-          'plugins/redmine_backlogs/jquery/jquery.qtip.css':
-            '<%= src %>sass/plugins/redmine_backlogs/jquery/jquery.qtip.scss'
+
+      plugins: {
+        files: [
+          {
+            expand: true,
+            cwd: '<%= src %>sass/plugins/',
+            src: '**/*.scss',
+            dest: 'plugins/',
+            ext: '.css',
+            extDot: 'last'
           }
+        ]
+      }
+    },
+
+    postcss: {
+      options: {
+        processors: [
+          require('autoprefixer')({ browsers: 'last 2 versions' })
+        ]
+      },
+
+      all: {
+        src: [
+          'stylesheets/*.css',
+          'plugins/**/*.css'
+        ]
       }
     },
 
     uglify: {
-      build: {
+      theme: {
         src: [
           '<%= src %>javascripts/modules/*.js',
           '<%= src %>javascripts/theme.js'
@@ -48,19 +59,21 @@ module.exports = function(grunt) {
         files: ['<%= src %>sass/**/*.scss'],
         tasks: ['css']
       },
+
       js: {
         files: ['<%= src %>javascripts/**/*.js'],
         tasks: ['js']
       }
     }
-  });
+  })
 
-  grunt.loadNpmTasks('grunt-sass');
-  grunt.loadNpmTasks('grunt-contrib-watch');
-  grunt.loadNpmTasks("grunt-contrib-uglify");
+  grunt.loadNpmTasks('grunt-sass')
+  grunt.loadNpmTasks('grunt-postcss')
+  grunt.loadNpmTasks('grunt-contrib-watch')
+  grunt.loadNpmTasks('grunt-contrib-uglify')
 
-  grunt.registerTask('css', ['sass']);
-  grunt.registerTask('js', ['uglify']);
+  grunt.registerTask('css', ['sass', 'postcss'])
+  grunt.registerTask('js', ['uglify'])
 
-  grunt.registerTask('default', ['css', 'js']);
-};
+  grunt.registerTask('default', ['css', 'js'])
+}

README.md

@@ -2,9 +2,13 @@
 
 A free Redmine theme for modern browsers.
 
-![Screenshot](https://github.com/HolonGlobe/PurpleMine2/raw/master/screenshots/issues-list.png)
+![The MIT License](https://img.shields.io/badge/license-MIT-584492.svg) [![Build Status](https://travis-ci.org/mrliptontea/PurpleMine2.svg?branch=master)](https://travis-ci.org/mrliptontea/PurpleMine2) [![Issues](https://img.shields.io/github/issues/mrliptontea/PurpleMine2.svg)](https://github.com/mrliptontea/PurpleMine2/issues) [![JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)
 
-Compatible with Redmine 2.5+ and browsers: IE10+/Edge, latest Firefox and Google Chrome (others were not tested).
+---
+
+![Screenshot](https://github.com/mrliptontea/PurpleMine2/raw/master/screenshots/issues.png)
+
+Compatible with Redmine 2.6+ and browsers: IE10+/Edge, latest Firefox and Google Chrome (others were not tested).
 
 It's written in [SCSS]. It uses [normalize.css] and benefits from some parts of [Bootstrap][bootstrap-sass] like mixins, structure, and stuff.
 
@@ -20,7 +24,7 @@ It's written in [SCSS]. It uses [normalize.css] and benefits from some parts of
 
 ## How install it
 
-To install PurpleMine, just download [.zip](https://github.com/HolonGlobe/PurpleMine2/archive/master.zip) and unpack it to your Redmine's `public/themes` folder.
+To install PurpleMine, just download [.zip](https://github.com/mrliptontea/PurpleMine2/archive/master.zip) and unpack it to your Redmine's `public/themes` folder.
 
 Then go to Redmine > Administration > Settings > Display and select PurpleMine2 from the list and save the changes.
 
@@ -34,21 +38,17 @@ Also, [Redmine Time Tracker][redmine_time_tracker] and [Redmine People][redmine_
 
 If you want to customize PurpleMine to your needs, first, make sure that you have installed [node.js](http://nodejs.org/) and `npm` is available in your terminal.
 
-If haven't yet, you need to install grunt:
-
-    npm install grunt-cli -g
-
 Then, from the directory that contains PurpleMine run:
 
     npm install
 
 Now all the dependencies should be ready to use. Run one more command:
 
-    grunt watch
+    npm run watch
 
-And now the grunt is watching for changes in files placed in `src/` folder. Just change what you need, and it'll run SASS preprocessor automatically.
+And now the grunt is watching for changes in files placed in `src/` folder. Just change what you need, and it'll run Sass preprocessor automatically.
 
-Regrettably, optional file include is not possible in SASS, so I would recommend creating a new file, e.g. `src/sass/_custom-variables.scss` and importing it a the beginning of the `application.scss` file. That way all the variables with the `!default` flag could be overridden.
+Regrettably, optional file include is not possible in Sass, so I would recommend creating a new file, e.g. `src/sass/_custom-variables.scss` and importing it a the beginning of the `application.scss` file. That way all the variables with the `!default` flag could be overridden.
 
 The path `src/sass/_custom-variables.scss` is added to `.gitignore` so it should make upgrading PurpleMine with keeping your changes rather painless, given that the only thing you changed in PurpleMine's source was adding this one line with `@import "custom-variables";`.
 
@@ -56,6 +56,78 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe
 
 ## Changelog
 
+v1.11.0 (2019-03-22):
+
+* Backported fixes from v2:
+  * Fixed #89: [RM+ custom menu](http://rmplus.pro/en/redmine/plugins/custom_menu) breaking the layout
+  * Fixed #90: regression in some sidebar layouts
+  * Fixed #93: Agile chart expanding indefinitely when Additional "Go to top" link is enabled
+  * Fixed #94: subtasks indentation
+  * Fixed styling of some flash messages
+  * Fixed horizontal scrollbar appearing when sidebar is on the right
+  * Fixed footer being mispositioned in Agile charts
+  * Fixed positioning of admin menu icons for some plugins
+  * Improved support for [Redmine Tags](https://www.redmineup.com/pages/plugins/tags) plugin
+  * Added separator line between news on the news list
+  * Improved Redmine 4.0 compatibility
+  * Updated Font Awesome icons to 4.7.0
+
+v1.10.0 (2019-03-12):
+
+* Fixed #86: added support for redmine_hearts plugin
+
+v1.9.0 (2019-03-01):
+
+* Fixed #42: override some styles from [RM+](http://rmplus.pro) plugins
+* Merged #43: fixes for Redmine 3.3.2.devel
+* Support for responsive menu and further changes for Redmine 3.3.2.devel (fixes #26)
+* Improved styles for custom flash messages in wiki content (e.g. for [WikiNG](http://www.redmine.org/plugins/wiking) plugin)
+* Introduce project tiles on projects list page (enabled by default, can be switched off by setting `$use-project-tiles` to `false`)
+* Fixed #44: adjust width of the label column on the login form
+* Merged #49: German translations
+* Fixed #50: printed content on second page onwards was missing in Firefox
+* Fixed #51: a plugin dropdown in top menu could be too narrow
+* Fixed #52: delete watcher icon in the sidebar was missing
+* Fixed #54: long checkbox lists will be scrollable
+* Fixed #62: anchors won't scroll the page
+* Fixed #69: fixed "remember me" checkbox layout on login page
+* Fixed #78: files not visible on list in wiki when there is a lot of them
+* Updated dependencies
+* Fixed #81: top watchers checkboxes were not visible on Firefox
+* Removed `checkbox` and `radio` mixins in favour of `check`
+* Fixed #83: editor tabs layout in Redmine 4.0
+
+v1.8.0 (2016-11-20):
+
+* Fixed #19: missing text wrapping for long text custom fields
+* Fixed #20: applied Font Awesome font-family for icons in Time Tracker overview
+* Fixed duplicated pencil icon for Description in issue form in Redmine 3.1.2+
+* Fixed #21: added styling for compatibility with layout changes in Redmine 3.2.0
+* Fixed #23: set width for progress bars
+* Fixed #25: proper styles for pagination
+* Fixed #28: correct icon will be displayed for users that cannot edit notes in journal
+* Fixed #30: styles will now compile with latest Sass
+* Fixed #32, #33: improve @shawndibble's styles for new main menu styles in Redmine 3.3
+* Various small visual tweaks
+* Fixed #34: project breadcrumbs in the header should wrap nicely
+* Fixed #35: `.icon-only` class should now display only icons, buttons with icons should de displayed correctly with Font-Awesome disabled
+* Fixed #36: npm dependencies can be installed on production environments + update grunt to its latest version
+* Fixed #37: added support for drag'n'drop re-ordering in issue statuses, roles, and trackers settings
+* Fixed #38: corrected z-index for dropdown new item menu on backlogs page (thanks to @futaz, see PR #39)
+* Changed indentation to 2 spaces (to match with Redmine's coding style)
+* Introduced [autoprefixer](https://github.com/postcss/autoprefixer) via [PostCSS](http://postcss.org)
+* Updated [scss-lint](https://github.com/brigade/scss-lint) rules
+* Added [JavaScript Standard Style](http://standardjs.com)
+
+v1.7.2 (2015-10-12):
+
+* Fixed `.pagination` float in project members settings
+* Lists' cells are aligned to center by default (as in Redmine's default theme)
+
+v1.7.1 (2015-10-10):
+
++ Improved styling for [Stuff To Do][stuff_to_do] plugin
+
 v1.7.0 (2015-09-25):
 
 * Added styles for optgroup (Firefox only)
@@ -105,7 +177,7 @@ v1.4.0 (2015-04-10):
 * Fixed #2: Make sure that `.sort` with Font Awesome icons won't have background image
 * Fixed attachments div's layout for wiki pages
 
-For more details, see [release v1.4.0](https://github.com/HolonGlobe/PurpleMine2/releases/tag/v1.4.0)
+For more details, see [release v1.4.0](https://github.com/mrliptontea/PurpleMine2/releases/tag/v1.4.0)
 
 v1.3.0 (2015-04-01):
 
@@ -163,3 +235,4 @@ Initial version
 [redmine_backlogs]: https://github.com/backlogs/redmine_backlogs
 [redmine_time_tracker]: https://github.com/hicknhack-software/redmine_time_tracker
 [redmine_crm_people]: http://www.redminecrm.com/projects/people/
+[stuff_to_do]: https://github.com/raafael911/stuff_to_do_plugin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "PurpleMine2",
-  "description": "A free Redmine 2.5+ theme written in SCSS",
+  "description": "A free Redmine 2.6+ theme written in SCSS",
   "keywords": [
     "redmine",
     "theme",
@@ -17,10 +17,30 @@
     "url": "https://github.com/mrliptontea/PurpleMine2/issues"
   },
   "homepage": "https://github.com/mrliptontea/PurpleMine2",
+  "scripts": {
+    "build": "grunt",
+    "watch": "grunt watch",
+    "lint": "standard && scss-lint"
+  },
+  "dependencies": {
+    "autoprefixer": "^9.4.8",
+    "grunt": "^1.0.4",
+    "grunt-contrib-uglify": "^4.0.0",
+    "grunt-contrib-watch": "^1.1.0",
+    "grunt-postcss": "^0.9.0",
+    "grunt-sass": "^3.0.2",
+    "node-sass": "^4.11.0"
+  },
   "devDependencies": {
-    "grunt": "^0.4.5",
-    "grunt-contrib-uglify": "^0.9.1",
-    "grunt-contrib-watch": "^0.6.1",
-    "grunt-sass": "^1.0.0"
+    "standard": "^12.0.1"
+  },
+  "standard": {
+    "globals": [
+      "$",
+      "localStorage"
+    ],
+    "ignore": [
+      "/javascripts"
+    ]
   }
 }

plugins/redmine_backlogs/jquery/jquery.multiselect.css

@@ -1 +1 @@
-.ui-multiselect{padding:2px 0 2px 4px;text-align:left}.ui-multiselect span.ui-icon{float:right}.ui-multiselect-single .ui-multiselect-checkboxes input{position:absolute !important;top:auto !important;left:-9999px}.ui-multiselect-single .ui-multiselect-checkboxes label{padding:5px !important}.ui-multiselect-header{margin-bottom:3px;padding:3px}.ui-multiselect-header ul{font-size:0.92em}.ui-multiselect-header ul li{padding:0 10px 0 0;float:left}.ui-multiselect-header a{text-decoration:none}.ui-multiselect-header a:hover{text-decoration:underline}.ui-multiselect-header span.ui-icon{float:left}.ui-multiselect-header li.ui-multiselect-close{padding-right:0;float:right;text-align:right}.ui-multiselect-menu{display:none;position:absolute;padding:3px;text-align:left;z-index:10000;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.ui-multiselect-checkboxes{position:relative;padding-right:2px;overflow-y:scroll}.ui-multiselect-checkboxes input[type="checkbox"]{top:0;margin:3px 0 0 -20px;float:left}.ui-multiselect-checkboxes input[type="checkbox"]:focus{outline:none}.ui-multiselect-checkboxes label{display:block;padding:3px 1px;padding-left:26px;border:1px solid transparent;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui-multiselect-checkboxes label input{position:relative;top:1px}.ui-multiselect-checkboxes li{clear:both;font-size:0.92em}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label{margin-bottom:2px;border-bottom:1px solid #ccc;font-weight:bold;text-align:center}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a{display:block;margin:1px 0;padding:3px;text-decoration:none}* html .ui-multiselect-checkboxes label{border:0 none}
+.ui-multiselect{padding:2px 0 2px 4px;text-align:left}.ui-multiselect span.ui-icon{float:right}.ui-multiselect-single .ui-multiselect-checkboxes input{position:absolute !important;top:auto !important;left:-9999px}.ui-multiselect-single .ui-multiselect-checkboxes label{padding:5px !important}.ui-multiselect-header{margin-bottom:3px;padding:3px}.ui-multiselect-header ul{font-size:.92em}.ui-multiselect-header ul li{padding:0 10px 0 0;float:left}.ui-multiselect-header a{text-decoration:none}.ui-multiselect-header a:hover{text-decoration:underline}.ui-multiselect-header span.ui-icon{float:left}.ui-multiselect-header li.ui-multiselect-close{padding-right:0;float:right;text-align:right}.ui-multiselect-menu{-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);display:none;position:absolute;z-index:10000;padding:3px;text-align:left}.ui-multiselect-checkboxes{position:relative;padding-right:2px;overflow-y:scroll}.ui-multiselect-checkboxes input[type="checkbox"]{top:0;margin:3px 0 0 -20px;float:left}.ui-multiselect-checkboxes input[type="checkbox"]:focus{outline:none}.ui-multiselect-checkboxes label{display:block;padding:3px 1px;padding-left:26px;border:1px solid transparent;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui-multiselect-checkboxes label input{position:relative;top:1px}.ui-multiselect-checkboxes li{clear:both;font-size:.92em}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label{margin-bottom:2px;border-bottom:1px solid #ccc;font-weight:bold;text-align:center}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a{display:block;margin:1px 0;padding:3px;text-decoration:none}* html .ui-multiselect-checkboxes label{border:0 none}

plugins/redmine_backlogs/jquery/jquery.qtip.css

@@ -1 +1 @@
-.qtip{position:absolute;top:-31000px;left:-31000px;width:auto;max-width:500px;outline:none}.ui-tooltip-content{position:relative;padding:10px;border:1px solid #ccc;background-color:#fff;color:#555;font-size:0.92em;text-align:left;word-wrap:break-word;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);overflow:hidden}.ui-tooltip-tip{border-color:#ccc;background-color:#fff}.ui-tooltip-tip{position:absolute;margin:0 auto;border:0 none;background:transparent;overflow:hidden;z-index:10}
+.qtip{position:absolute;top:-31000px;left:-31000px;width:auto;max-width:500px;outline:none}.ui-tooltip-content{-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);position:relative;padding:10px;overflow:hidden;border:1px solid #ccc;background-color:#fff;color:#555;font-size:.92em;text-align:left;word-wrap:break-word}.ui-tooltip-tip{border-color:#ccc;background-color:#fff}.ui-tooltip-tip{position:absolute;z-index:10;margin:0 auto;overflow:hidden;border:0 none;background:transparent}

src/javascripts/modules/HistoryTabs.js

@@ -1,98 +1,107 @@
-var PurpleMine = PurpleMine || {};
+var PurpleMine = PurpleMine || {} // eslint-disable-line no-use-before-define
 
-PurpleMine.HistoryTabs = (function()
-{
-    "use strict";
+PurpleMine.HistoryTabs = (function () {
+  'use strict'
 
-    var self;
+  var instance
   var translations = {
     en: {
-            all    : "All",
-            notes  : "Notes",
-            details: "Changes"
+      all: 'All',
+      notes: 'Notes',
+      details: 'Changes'
+    },
+    ro: {
+      all: 'Toate',
+      notes: 'Note',
+      details: 'Schimbări'
+    },
+    fr: {
+      all: 'Tout',
+      notes: 'Remarques',
+      details: 'Changements'
     },
     pl: {
-            all    : "Wszystko",
-            notes  : "Notatki",
-            details: "Zmiany"
-        }
-    };
-
-    function HistoryTabs()
-    {
-        if (self)
-        {
-            return self;
-        }
-
-        self = this;
-
-        this.$tabsContainer = null;
-        this.$tabs          = null;
-        this.$history       = $("#history");
-        this.lang           = document.documentElement.lang;
-
-        if (typeof translations[this.lang] === "undefined")
-        {
-            this.lang = "en";
-        }
-
-        this._ = translations[this.lang];
-
-        if (this.$history.length > 0)
-        {
-            buildTabs();
-            markFirstOfTypes();
+      all: 'Wszystko',
+      notes: 'Notatki',
+      details: 'Zmiany'
+    },
+    de: {
+      all: 'Alles',
+      notes: 'Kommentare',
+      details: 'Änderungen'
+    },
+    ja: {
+      all: 'すべて',
+      notes: '注記',
+      details: '変更'
     }
   }
 
-    function buildTabs()
-    {
-        var html = "",
-            liStart = "<li><a href=\"javascript:;\" class=\"",
-            liMid = "history-tab\" data-tab=\"",
-            liEnd = "</a></li>";
-
-        html += "<div class=\"tabs\"><ul>";
-        html += liStart + "selected " + liMid + "all\">" + self._.all + liEnd;
-        html += liStart + liMid + "notes\">" + self._.notes + liEnd;
-        html += liStart + liMid + "details\">" + self._.details + liEnd;
-        html += "</ul></div>";
-
-        self.$tabsContainer = $(html);
-        $("#history > h3").after(self.$tabsContainer);
-
-        self.$tabs = self.$tabsContainer.find(".history-tab");
-        self.$tabs.on("click", tabClick);
+  function HistoryTabs () {
+    if (instance) {
+      return instance
     }
 
-    function markFirstOfTypes()
-    {
-        self.$history.find(".has-notes:first").addClass("first-of-notes");
-        self.$history.find(".has-details:first").addClass("first-of-details");
+    instance = this
+
+    this.$tabsContainer = null
+    this.$tabs = null
+    this.$history = $('#history')
+    this.lang = document.documentElement.lang
+
+    if (typeof translations[this.lang] === 'undefined') {
+      this.lang = 'en'
     }
 
-    var tabClick = function()
-    {
-        var $this = $(this),
-            tab = $this.attr("data-tab");
+    this._ = translations[this.lang]
 
-        self.$tabs.removeClass("selected");
-        $this.addClass("selected");
-
-        self.$history
-                .removeClass("hide-details")
-                .removeClass("hide-notes");
-
-        if ("notes" === tab)
-        {
-            self.$history.addClass("hide-details");
+    if (this.$history.length > 0) {
+      buildTabs()
+      markFirstOfTypes()
     }
-        else if ("details" === tab)
-        {
-            self.$history.addClass("hide-notes");
   }
-    };
 
-    return HistoryTabs;
-}());
+  function buildTabs () {
+    var html = ''
+    var liStart = '<li><a href="javascript:;" class="'
+    var liMid = 'history-tab" data-tab="'
+    var liEnd = '</a></li>'
+
+    html += '<div class="tabs"><ul>'
+    html += liStart + 'selected ' + liMid + 'all">' + instance._.all + liEnd
+    html += liStart + liMid + 'notes">' + instance._.notes + liEnd
+    html += liStart + liMid + 'details">' + instance._.details + liEnd
+    html += '</ul></div>'
+
+    instance.$tabsContainer = $(html)
+    $('#history > h3').after(instance.$tabsContainer)
+
+    instance.$tabs = instance.$tabsContainer.find('.history-tab')
+    instance.$tabs.on('click', tabClick)
+  }
+
+  function markFirstOfTypes () {
+    instance.$history.find('.has-notes:first').addClass('first-of-notes')
+    instance.$history.find('.has-details:first').addClass('first-of-details')
+  }
+
+  var tabClick = function () {
+    var $this = $(this)
+    var tab = $this.attr('data-tab')
+
+    instance.$tabs.removeClass('selected')
+    $this.addClass('selected')
+
+    instance.$history
+      .removeClass('hide-details')
+      .removeClass('hide-notes')
+
+    if (tab === 'notes') {
+      instance.$history.addClass('hide-details')
+    } else if (tab === 'details') {
+      instance.$history.addClass('hide-notes')
+    }
+  }
+
+  return HistoryTabs
+}())

src/javascripts/modules/MenuCollapse.js

@@ -1,142 +1,128 @@
-var PurpleMine = PurpleMine || {};
+var PurpleMine = PurpleMine || {} // eslint-disable-line no-use-before-define
 
-PurpleMine.MenuCollapse = (function()
-{
-    "use strict";
+PurpleMine.MenuCollapse = (function () {
+  'use strict'
 
-    var self;
+  var instance
   var translations = {
     en: {
-            topMenuToggler : "Expand/collapse top menu",
-            mainMenuToggler: "Expand/collapse main menu"
+      topMenuToggler: 'Expand/collapse top menu'
+    },
+    ro: {
+      topMenuToggler: 'Deschide/închide meniul de sus'
+    },
+    fr: {
+      topMenuToggler: 'Développer/réduire le menu principal'
     },
     pl: {
-            topMenuToggler : "Zwiń/rozwiń górne menu",
-            mainMenuToggler: "Zwiń/rozwiń główne menu"
+      topMenuToggler: 'Zwiń/rozwiń górne menu'
+    },
+    de: {
+      topMenuToggler: 'Ein-/Ausklappen Hauptmenu'
+    },
+    ja: {
+      topMenuToggler: 'トップメニューの展開/折りたたみ'
     }
-    };
-
-    function MenuCollapse()
-    {
-        if (self)
-        {
-            return self;
   }
 
-        self = this;
-
-        this.lang = document.documentElement.lang;
-
-        if (typeof translations[this.lang] === "undefined")
-        {
-            this.lang = "en";
+  function MenuCollapse () {
+    if (instance) {
+      return instance
     }
 
-        this._ = translations[this.lang];
+    instance = this
+
+    this.lang = document.documentElement.lang
+
+    if (typeof translations[this.lang] === 'undefined') {
+      this.lang = 'en'
+    }
+
+    this._ = translations[this.lang]
 
     this.menus = {
       top: {
-                $el: $("#top-menu")
-            },
-            main: {
-                $el: $("#main-menu")
+        $el: $('#top-menu')
+      }
     }
-        };
 
-        for (var menu in this.menus)
-        {
-            if (this.menus.hasOwnProperty(menu) &&
-                this.menus[menu].$el.length > 0)
-            {
-                handleMenu(menu);
+    for (var menu in this.menus) {
+      if (this.menus.hasOwnProperty(menu) && this.menus[menu].$el.length > 0) {
+        handleMenu(menu)
       }
     }
   }
 
-    function handleMenu(menu)
-    {
-        if ("none" === self.menus[menu].$el.css("maxHeight"))
-        {
-            return false;
+  function handleMenu (menu) {
+    if (instance.menus[menu].$el.css('maxHeight') === 'none') {
+      return false
     }
 
-        self.menus[menu].collapsed = true;
+    instance.menus[menu].collapsed = true
 
-        if (window.localStorage)
-        {
-            self.menus[menu].collapsed =
-                null === localStorage.getItem(getMenuStorageKey(menu));
+    if (window.localStorage) {
+      instance.menus[menu].collapsed =
+        localStorage.getItem(getMenuStorageKey(menu)) === null
     }
 
-        buildToggleButton(menu);
+    buildToggleButton(menu)
 
-        if (false === self.isCollapsed(menu))
-        {
-            self.expandMenu(menu);
+    if (instance.isCollapsed(menu) === false) {
+      instance.expandMenu(menu)
     }
   }
 
-    function getMenuStorageKey(menu)
-    {
-        return "PurpleMine:" + menu + "MenuExpanded";
+  function getMenuStorageKey (menu) {
+    return 'PurpleMine:' + menu + 'MenuExpanded'
   }
 
-    function buildToggleButton(menu)
-    {
-        var togglerClass = menu + "-menu-toggler",
-            togglerLabel = self._[menu + "MenuToggler"],
-            togglerHtml;
+  function buildToggleButton (menu) {
+    var togglerClass = menu + '-menu-toggler'
+    var togglerLabel = instance._[menu + 'MenuToggler']
+    var togglerHtml = '<a href="javascript:;" class="' +
+      togglerClass +
+      '" title="' +
+      togglerLabel +
+      '"></a>'
+    instance.menus[menu].$toggler = $(togglerHtml)
 
-        togglerHtml = "<a href=\"javascript:;\" class=\"" + togglerClass +
-                        "\" title=\"" + togglerLabel + "\"></a>";
-        self.menus[menu].$toggler = $(togglerHtml);
-
-        self.menus[menu].$el.prepend(self.menus[menu].$toggler);
-        self.menus[menu].$toggler.on("click", { menu: menu }, self.toggleMenu);
+    instance.menus[menu].$el.prepend(instance.menus[menu].$toggler)
+    instance.menus[menu].$toggler.on('click', { menu: menu }, instance.toggleMenu)
   }
 
-    MenuCollapse.prototype.toggleMenu = function(event)
-    {
-        var menu = event.data.menu || "";
+  MenuCollapse.prototype.toggleMenu = function (event) {
+    var menu = event.data.menu || ''
 
-        if (self.isCollapsed(menu))
-        {
-            self.expandMenu(menu);
+    if (instance.isCollapsed(menu)) {
+      instance.expandMenu(menu)
+    } else {
+      instance.collapseMenu(menu)
     }
-        else
-        {
-            self.collapseMenu(menu);
   }
-    };
 
-    MenuCollapse.prototype.isCollapsed = function(menu)
-    {
-        return this.menus[menu].collapsed;
-    };
-
-    MenuCollapse.prototype.expandMenu = function(menu)
-    {
-        this.menus[menu].$el.addClass("expanded");
-        this.menus[menu].$toggler.addClass("expanded");
-        this.menus[menu].collapsed = false;
-
-        if (window.localStorage)
-        {
-            localStorage.setItem(getMenuStorageKey(menu), "x");
+  MenuCollapse.prototype.isCollapsed = function (menu) {
+    return this.menus[menu].collapsed
   }
-    };
 
-    MenuCollapse.prototype.collapseMenu = function(menu)
-    {
-        this.menus[menu].$el.removeClass("expanded");
-        this.menus[menu].$toggler.removeClass("expanded");
-        this.menus[menu].collapsed = true;
+  MenuCollapse.prototype.expandMenu = function (menu) {
+    this.menus[menu].$el.addClass('expanded')
+    this.menus[menu].$toggler.addClass('expanded')
+    this.menus[menu].collapsed = false
 
-        if (window.localStorage)
-        {
-            localStorage.removeItem(getMenuStorageKey(menu));
+    if (window.localStorage) {
+      localStorage.setItem(getMenuStorageKey(menu), 'x')
+    }
   }
-    };
 
-    return MenuCollapse;
-}());
+  MenuCollapse.prototype.collapseMenu = function (menu) {
+    this.menus[menu].$el.removeClass('expanded')
+    this.menus[menu].$toggler.removeClass('expanded')
+    this.menus[menu].collapsed = true
+
+    if (window.localStorage) {
+      localStorage.removeItem(getMenuStorageKey(menu))
+    }
+  }
+
+  return MenuCollapse
+}())

src/javascripts/modules/RevisionGraph.js

@@ -1,157 +1,141 @@
-var PurpleMine = PurpleMine || {};
+var PurpleMine = PurpleMine || {} // eslint-disable-line no-use-before-define
 /* global Raphael: false, revisionGraph: true */
-/* jshint camelcase: false */
-/* jshint maxstatements: false */
-/* jshint maxlen: 160 */
 
-PurpleMine.RevisionGraph = function(holder, commits_hash, graph_space)
-{
-    "use strict";
+PurpleMine.RevisionGraph = function (holder, commitsHash, graphSpace) {
+  'use strict'
 
-    var XSTEP = 20,
-        CIRCLE_INROW_OFFSET = 17;
-    var commits_by_scmid = commits_hash,
-        commits = $.map(commits_by_scmid, function(val){return val;});
-    var max_rdmid = commits.length - 1;
-    var commit_table_rows = $("table.changesets tr.changeset");
+  var XSTEP = 20
+  var CIRCLE_INROW_OFFSET = 17
+  var commitsByScmid = commitsHash
+  var commits = $.map(commitsByScmid, function (val) { return val })
+  var maxRdmid = commits.length - 1
+  var commitTableRows = $('table.changesets tr.changeset')
 
   // create graph
-    if (revisionGraph !== null)
-    {
-        revisionGraph.clear();
-    }
-    else
-    {
-        revisionGraph = new Raphael(holder);
+  if (revisionGraph !== null) {
+    revisionGraph.clear()
+  } else {
+    revisionGraph = new Raphael(holder)
   }
 
-    var top = revisionGraph.set();
+  var top = revisionGraph.set()
 
   // init dimensions
-    var graph_x_offset = commit_table_rows.first().find("td").first().position().left - $(holder).position().left,
-        graph_y_offset = $(holder).position().top,
-        graph_right_side = graph_x_offset + (graph_space + 1) * XSTEP,
-        graph_bottom = commit_table_rows.last().position().top + commit_table_rows.last().height() - graph_y_offset;
+  var graphXOffset = commitTableRows.first().find('td').first().position().left - $(holder).position().left
+  var graphYOffset = $(holder).position().top
+  var graphRightSide = graphXOffset + (graphSpace + 1) * XSTEP
+  var graphBottom = commitTableRows.last().position().top + commitTableRows.last().height() - graphYOffset
 
-    revisionGraph.setSize(graph_right_side, graph_bottom);
+  revisionGraph.setSize(graphRightSide, graphBottom)
 
   // init colors
   var colors = [
-        "#e74c3c",
-        "#584492",
-        "#019851",
-        "#ed820c",
-        "#4183c4"
-    ];
+    '#e74c3c',
+    '#584492',
+    '#019851',
+    '#ed820c',
+    '#4183c4'
+  ]
 
   // get more colors if needed
-    if (graph_space >= colors.length)
-    {
-        Raphael.getColor.reset();
+  if (graphSpace >= colors.length) {
+    Raphael.getColor.reset()
 
-        for (var k = 0; k <= graph_space; k++)
-        {
-            colors.push(Raphael.getColor(0.9));
+    for (var k = 0; k <= graphSpace; k++) {
+      colors.push(Raphael.getColor(0.9))
     }
   }
 
-    var parent_commit;
-    var x, y, parent_x, parent_y;
-    var path, title;
-    var revision_dot_overlay;
+  var parentCommit
+  var x, y, parentX, parentY
+  var path, title
+  var revisionDotOverlay
 
-    $.each(commits, function(index, commit)
-    {
-        if (!commit.hasOwnProperty("space"))
-        {
-            commit.space = 0;
+  $.each(commits, function (index, commit) {
+    if (!commit.hasOwnProperty('space')) {
+      commit.space = 0
     }
 
-        y = commit_table_rows.eq(max_rdmid - commit.rdmid).position().top - graph_y_offset + CIRCLE_INROW_OFFSET;
-        x = graph_x_offset + XSTEP / 2 + XSTEP * commit.space;
+    y = commitTableRows.eq(maxRdmid - commit.rdmid).position().top - graphYOffset + CIRCLE_INROW_OFFSET
+    x = graphXOffset + XSTEP / 2 + XSTEP * commit.space
 
-        revisionGraph.circle(x, y, 3.5)
+    revisionGraph
+      .circle(x, y, 3.5)
       .attr({
         fill: colors[commit.space],
-                stroke: "none"
-            }).toFront();
+        stroke: 'none'
+      })
+      .toFront()
 
     // paths to parents
-        $.each(commit.parent_scmids, function(index, parent_scmid)
-        {
-            parent_commit = commits_by_scmid[parent_scmid];
+    $.each(commit.parent_scmids, function (index, parentScmid) {
+      parentCommit = commitsByScmid[parentScmid]
 
-            if (parent_commit)
-            {
-                if (!parent_commit.hasOwnProperty("space"))
-                {
-                    parent_commit.space = 0;
+      if (parentCommit) {
+        if (!parentCommit.hasOwnProperty('space')) {
+          parentCommit.space = 0
         }
 
-                parent_y = commit_table_rows.eq(max_rdmid - parent_commit.rdmid).position().top - graph_y_offset + CIRCLE_INROW_OFFSET;
-                parent_x = graph_x_offset + XSTEP / 2 + XSTEP * parent_commit.space;
+        parentY = commitTableRows.eq(maxRdmid - parentCommit.rdmid).position().top - graphYOffset + CIRCLE_INROW_OFFSET
+        parentX = graphXOffset + XSTEP / 2 + XSTEP * parentCommit.space
 
-                if (parent_commit.space === commit.space)
-                {
+        if (parentCommit.space === commit.space) {
           // vertical path
           path = revisionGraph.path([
-                        "M", x, y,
-                        "V", parent_y]);
-                }
-                else
-                {
+            'M', x, y,
+            'V', parentY])
+        } else {
           // path to a commit in a different branch (Bezier curve)
           path = revisionGraph.path([
-                        "M", x, y,
-                        "C", x, y, x, y + (parent_y - y) / 2, x + (parent_x - x) / 2, y + (parent_y - y) / 2,
-                        "C", x + (parent_x - x) / 2, y + (parent_y - y) / 2, parent_x, parent_y-(parent_y-y)/2, parent_x, parent_y
-                    ]);
+            'M', x, y,
+            'C', x, y, x, y + (parentY - y) / 2, x + (parentX - x) / 2, y + (parentY - y) / 2,
+            'C', x + (parentX - x) / 2, y + (parentY - y) / 2, parentX, parentY - (parentY - y) / 2, parentX, parentY
+          ])
         }
-            }
-            else
-            {
+      } else {
         // vertical path ending at the bottom of the revisionGraph
         path = revisionGraph.path([
-                    "M", x, y,
-                    "V", graph_bottom
-                ]);
+          'M', x, y,
+          'V', graphBottom
+        ])
       }
 
-            path.attr({stroke: colors[commit.space], "stroke-width": 1.5}).toBack();
-        });
-
-        revision_dot_overlay = revisionGraph.circle(x, y, 10);
-        revision_dot_overlay
+      path
         .attr({
-                fill   : "#000",
+          stroke: colors[commit.space],
+          'stroke-width': 1.5
+        })
+        .toBack()
+    })
+
+    revisionDotOverlay = revisionGraph.circle(x, y, 10)
+    revisionDotOverlay
+      .attr({
+        fill: '#000',
         opacity: 0,
-                cursor : "pointer",
+        cursor: 'pointer',
         href: commit.href
-            });
+      })
 
-        if (commit.refs !== null && commit.refs.length > 0)
-        {
-            title = document.createElementNS(revisionGraph.canvas.namespaceURI, "title");
-            title.appendChild(document.createTextNode(commit.refs));
-            revision_dot_overlay.node.appendChild(title);
+    if (commit.refs !== null && commit.refs.length > 0) {
+      title = document.createElementNS(revisionGraph.canvas.namespaceURI, 'title')
+      title.appendChild(document.createTextNode(commit.refs))
+      revisionDotOverlay.node.appendChild(title)
     }
 
-        top.push(revision_dot_overlay);
-    });
+    top.push(revisionDotOverlay)
+  })
 
-    top.toFront();
-};
+  top.toFront()
+}
 
-$(function()
-{
-    "use strict";
+$(function () {
+  'use strict'
 
-    if (window.drawRevisionGraph)
-    {
+  if (window.drawRevisionGraph) {
     // override Redmine's function
-        window.drawRevisionGraph = PurpleMine.RevisionGraph;
+    window.drawRevisionGraph = PurpleMine.RevisionGraph
     // make graph redraw itself
-        $(window).resize();
+    $(window).resize()
   }
-});
-
+})

src/javascripts/modules/SidebarToggler.js

@@ -1,154 +1,146 @@
-var PurpleMine = PurpleMine || {};
+var PurpleMine = PurpleMine || {} // eslint-disable-line no-use-before-define
 
-PurpleMine.SidebarToggler = (function()
-{
-    "use strict";
+PurpleMine.SidebarToggler = (function () {
+  'use strict'
 
-    var self;
+  var instance
   var translations = {
     en: {
-            toggler: "Toggle sidebar"
+      toggler: 'Toggle sidebar'
+    },
+    ro: {
+      toggler: 'Deschide/închide bara laterală'
+    },
+    fr: {
+      toggler: 'Basculer la barre latérale'
     },
     pl: {
-            toggler: "Pokaż/ukryj panel boczny"
+      toggler: 'Pokaż/ukryj panel boczny'
+    },
+    ja: {
+      toggler: 'サイドバーの切り替え'
     }
-    };
-
-    function SidebarToggler()
-    {
-        if (self)
-        {
-            return self;
   }
 
-        self = this;
-
-        this.sidebarVisible = true;
-        this.sidebarHiding  = null;
-        this.$toggler       = null;
-        this.$main          = $("#main");
-        this.$sidebar       = $("#sidebar");
-        this.lang           = document.documentElement.lang;
-
-        if (typeof translations[this.lang] === "undefined")
-        {
-            this.lang = "en";
+  function SidebarToggler () {
+    if (instance) {
+      return instance
     }
 
-        this._ = translations[this.lang];
+    instance = this
+
+    this.sidebarVisible = true
+    this.sidebarHiding = null
+    this.$toggler = null
+    this.$main = $('#main')
+    this.$sidebar = $('#sidebar')
+    this.lang = document.documentElement.lang
+
+    if (typeof translations[this.lang] === 'undefined') {
+      this.lang = 'en'
+    }
+
+    this._ = translations[this.lang]
 
     // Fix issue with context menu position
-        if ("relative" === this.$main.css("position"))
-        {
-            $("#context-menu").appendTo("#wrapper3");
+    if (this.$main.css('position') === 'relative') {
+      $(window).load(function () {
+        $('#context-menu').appendTo('#wrapper3')
+      })
     }
 
-        handleSidebar();
+    handleSidebar()
   }
 
-    function handleSidebar()
-    {
-        if (window.localStorage)
-        {
-            self.sidebarVisible =
-                null === localStorage.getItem("PurpleMine:sidebarHidden");
+  function handleSidebar () {
+    if (window.localStorage) {
+      instance.sidebarVisible =
+        localStorage.getItem('PurpleMine:sidebarHidden') === null
     }
 
-        if (self.$sidebar.length > 0 &&
-            false === self.$main.hasClass("nosidebar"))
-        {
-            buildButton();
-            bindKeyHandler();
+    if (
+      instance.$sidebar.length > 0 &&
+      instance.$main.hasClass('nosidebar') === false
+    ) {
+      buildButton()
+      bindKeyHandler()
 
-            if (false === self.sidebarVisible)
-            {
-                self.hideSidebar(true);
+      if (instance.sidebarVisible === false) {
+        instance.hideSidebar(true)
       }
     }
   }
 
-    function bindKeyHandler()
-    {
-        var body = document.getElementsByTagName("body")[0];
+  function bindKeyHandler () {
+    var body = document.getElementsByTagName('body')[0]
 
-        window.onkeydown = function(event)
-        {
-            if (body === event.target && 83 === event.keyCode && // "s"
-                false === event.ctrlKey && false === event.altKey &&
-                false === event.shiftKey)
-            {
-                self.toggleSidebar();
+    window.onkeydown = function (event) {
+      if (
+        body === event.target &&
+        event.keyCode === 83 && // "s"
+        event.ctrlKey === false &&
+        event.altKey === false &&
+        event.shiftKey === false
+      ) {
+        instance.toggleSidebar()
+      }
     }
-        };
   }
 
-    function buildButton()
-    {
-        var togglerClass = "sidebar-toggler",
-            togglerHtml;
+  function buildButton () {
+    var togglerClass = 'sidebar-toggler'
+    var togglerHtml = '<a href="javascript:;" class="' +
+      togglerClass +
+      '" title="' +
+      instance._.toggler +
+      '"></a>'
+    instance.$toggler = $(togglerHtml)
 
-        togglerHtml = "<a href=\"javascript:;\" class=\"" + togglerClass +
-                        "\" title=\"" + self._.toggler + "\"></a>";
-        self.$toggler = $(togglerHtml);
-
-        self.$main.append(self.$toggler);
-        self.$toggler.on("click", self.toggleSidebar);
+    instance.$main.append(instance.$toggler)
+    instance.$toggler.on('click', instance.toggleSidebar)
   }
 
-    SidebarToggler.prototype.toggleSidebar = function()
-    {
-        if (self.sidebarVisible)
-        {
-            self.hideSidebar();
+  SidebarToggler.prototype.toggleSidebar = function () {
+    if (instance.sidebarVisible) {
+      instance.hideSidebar()
+    } else {
+      instance.showSidebar()
     }
-        else
-        {
-            self.showSidebar();
-        }
-    };
-
-    SidebarToggler.prototype.hideSidebar = function(immediate)
-    {
-        if (true === immediate)
-        {
-            this.$sidebar.addClass("sidebar-hiding sidebar-hidden");
-        }
-        else
-        {
-            this.$sidebar.addClass("sidebar-hiding");
-            this.sidebarHiding = setTimeout(function sidebarTimeout()
-            {
-                self.$sidebar.addClass("sidebar-hidden");
-            }, 500);
   }
 
-        this.$toggler.addClass("sidebar-hidden");
-        this.sidebarVisible = false;
-
-        if (window.localStorage)
-        {
-            localStorage.setItem("PurpleMine:sidebarHidden", "x");
+  SidebarToggler.prototype.hideSidebar = function (immediate) {
+    if (immediate === true) {
+      this.$sidebar.addClass('sidebar-hiding sidebar-hidden')
+    } else {
+      this.$sidebar.addClass('sidebar-hiding')
+      this.sidebarHiding = setTimeout(function sidebarTimeout () {
+        instance.$sidebar.addClass('sidebar-hidden')
+      }, 500)
     }
-    };
 
-    SidebarToggler.prototype.showSidebar = function()
-    {
-        clearTimeout(this.sidebarHiding);
+    this.$toggler.addClass('sidebar-hidden')
+    this.sidebarVisible = false
 
-        self.$sidebar.removeClass("sidebar-hidden");
-        setTimeout(function sidebarTimeout()
-        {
-            self.$sidebar.removeClass("sidebar-hiding");
-        }, 50);
-
-        this.$toggler.removeClass("sidebar-hidden");
-        this.sidebarVisible = true;
-
-        if (window.localStorage)
-        {
-            localStorage.removeItem("PurpleMine:sidebarHidden");
+    if (window.localStorage) {
+      localStorage.setItem('PurpleMine:sidebarHidden', 'x')
+    }
   }
-    };
 
-    return SidebarToggler;
-}());
+  SidebarToggler.prototype.showSidebar = function () {
+    clearTimeout(this.sidebarHiding)
+
+    instance.$sidebar.removeClass('sidebar-hidden')
+    setTimeout(function sidebarTimeout () {
+      instance.$sidebar.removeClass('sidebar-hiding')
+    }, 50)
+
+    this.$toggler.removeClass('sidebar-hidden')
+    this.sidebarVisible = true
+
+    if (window.localStorage) {
+      localStorage.removeItem('PurpleMine:sidebarHidden')
+    }
+  }
+
+  return SidebarToggler
+}())

src/javascripts/theme.js

@@ -1,9 +1,9 @@
-$(function()
-{
+$(function () {
   /* global PurpleMine */
-    "use strict";
+  'use strict'
 
-    new PurpleMine.SidebarToggler();
-    new PurpleMine.HistoryTabs();
-    new PurpleMine.MenuCollapse();
-});
+  /* eslint-disable no-new */
+  new PurpleMine.SidebarToggler()
+  new PurpleMine.HistoryTabs()
+  new PurpleMine.MenuCollapse()
+})

src/sass/_mixins.scss

@@ -5,11 +5,8 @@
 @import "mixins/center-block";
 @import "mixins/clearfix";
 @import "mixins/forms";
-@import "mixins/gradients";
 @import "mixins/image";
-@import "mixins/opacity";
 @import "mixins/text-overflow";
-@import "mixins/vendor-prefixes";
 
 @import "mixins/issues";
 @import "mixins/link-variant";

src/sass/_variables.scss

@@ -17,11 +17,11 @@ $use-gravatars:                 true !default;
 $use-font-awesome:              true !default;
 $use-logo:                      false !default;
 $use-retina-logo:               false !default;
+$use-project-tiles:             true !default;
 $issue-subject-large:           true !default;
 $enable-sidebar-toggler:        true !default;
 $wiki-page-more-vertical-space: true !default;
 $top-menu-collapse:             false !default;
-$main-menu-collapse:            false !default;
 
 
 //== Colors
@@ -106,6 +106,7 @@ $headings-anchor-color-active:  $gray-light !default;
 $wiki-text:                     #333 !default;
 $wiki-font-size:                16px !default;
 $wiki-line-height:              1.6 !default;
+$wiki-preview-bg:               #fcfcfc !default;
 
 $toc-active-link:               darken($link-color, 10%) !default;
 $toc-active-link-hover:         darken($toc-active-link, 10%) !default;
@@ -144,6 +145,7 @@ $component-active-border:       $brand-primary !default;
 $font-size-list:                .92em !default;
 
 $collapsible-animation-time:    .3s !default;
+$collapsible-max-height:        10000px !default;
 
 
 //== Tables
@@ -249,6 +251,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;
@@ -271,6 +274,7 @@ $changeset-deleted-color:       $brand-danger !default;
 $btn-font-weight:               normal !default;
 $btn-padding-vertical:          3px !default;
 $btn-padding-horizontal:        12px !default;
+$btn-padding-horizontal-small:  8px !default;
 
 $btn-link-color:                $link-color !default;
 $btn-link-bg:                   $body-bg !default;
@@ -310,7 +314,9 @@ $input-border:                  #ccc !default;
 $input-border-radius:           $border-radius-small !default;
 $input-border-radius-large:     $border-radius-large !default;
 
-$input-border-focus:            #51a7e8 !default;
+$input-border-focus:            $brand-primary !default;
+$input-border-focus-alpha:      .6 !default;
+$input-shadow-focus-alpha:      .2 !default;
 $input-color-placeholder:       #999 !default;
 
 $input-padding-vertical:        $btn-padding-vertical !default;
@@ -325,6 +331,12 @@ $label-space:                   10px !default;
 $legend-color:                  $gray-dark !default;
 $legend-border-color:           #e5e5e5 !default;
 
+$check-input-gutter:            20px !default;
+$check-input-margin-vertical:   3px !default;
+$check-input-margin-horizontal: 8px !default;
+
+$check-list-max-height:         20 * $line-height-computed;
+$check-list-offset-top:         $input-padding-vertical + 1px;
 
 //== Top
 //
@@ -343,6 +355,24 @@ $header-padding-horizontal:     $padding-side !default;
 $header-title-size:             $font-size-h3 !default;
 $header-title-line-height:      $line-height-computed * 1.5 !default;
 
+$responsive-header-height:      54px !default;
+
+$flyout-menu-bg:                darken($header-bg, 15%) !default;
+$flyout-menu-text:              #fff !default;
+$flyout-menu-link:              #fff !default;
+$flyout-menu-link-active-bg:    $header-bg !default;
+$flyout-menu-link-active:       #fff !default;
+$flyout-menu-header-bg:         darken($header-bg, 25%) !default;
+$flyout-menu-header-border:     darken($header-bg, 25%) !default;
+$flyout-menu-header-text:       #fff !default;
+
+$quick-search-width:            200px !default;
+$quick-search-border:           darken($header-bg, 15%) !default;
+$quick-search-border-focus:     lighten($header-bg, 25%) !default;
+$quick-search-box-width:        300px !default;
+$quick-search-dropdown-bg:      $body-bg !default;
+$quick-search-dropdown-border:  $gray-lighter !default;
+
 $logo-image-width:              60px !default;
 $logo-image-height:             40px !default;
 $logo-position-horizontal:      $header-padding-vertical !default;
@@ -350,6 +380,7 @@ $logo-position-vertical:        center !default;
 $logo-space:                    floor($header-padding-vertical / 2) !default;
 
 $main-menu-bg:                  $gray-lightest !default;
+$main-menu-bg-hover:            $gray-lightest !default;
 $main-menu-link:                $gray-darker !default;
 $main-menu-link-active:         #000 !default;
 $main-menu-border:              $gray-lighter !default;
@@ -358,6 +389,7 @@ $main-menu-shadow-width:        3px !default;
 $main-menu-shadow-active:       $brand-primary !default;
 $main-menu-padding-vertical:    $padding-large-vertical !default;
 $main-menu-padding-horizontal:  5px !default;
+$main-menu-dropdown-bg:         lighten($main-menu-bg, 3%);
 
 
 //== Pagination
@@ -367,17 +399,21 @@ $pagination-padding-vertical:   $btn-padding-vertical !default;
 $pagination-padding-horizontal: 10px !default;
 
 $pagination-color:              $link-color !default;
-$pagination-bg:                 #fff !default;
+$pagination-bg:                 #fafafa !default;
 $pagination-border:             #ddd !default;
 
 $pagination-hover-color:        $link-hover-color !default;
 $pagination-hover-bg:           $gray-lightest !default;
-$pagination-hover-border:       #ddd !default;
+$pagination-hover-border:       #bbb !default;
 
 $pagination-active-color:       #fff !default;
 $pagination-active-bg:          $brand-primary !default;
 $pagination-active-border:      $brand-primary !default;
 
+$pagination-inactive-color:     #ccc !default;
+$pagination-inactive-bg:        #fff !default;
+$pagination-inactive-border:    #eee !default;
+
 
 //== Tabs
 //
@@ -438,9 +474,11 @@ $progress-bar-info-bg:          lighten($brand-info, 20%) !default;
 //== Panels
 //
 
-$panel-body-padding:            15px !default;
+$panel-body-padding-vertical:   15px !default;
+$panel-body-padding-horizontal: 15px !default;
+$panel-body-padding:            $panel-body-padding-vertical $panel-body-padding-horizontal !default;
 $panel-color:                   #555 !default;
-$panel-bg:                      #f5f5f5 !default;
+$panel-bg:                      #f9f9f9 !default;
 $panel-border:                  #ccc !default;
 $panel-border-radius:           $border-radius-base !default;
 $panel-shadow:                  0 1px 2px rgba(#000, .1),
@@ -474,6 +512,7 @@ $issue-attribute-padding-h:     5px !default;
 
 //== Speech "bubbles"
 //
+
 $bubble-gravatar-size:          24px !default;
 $bubble-gravatar-space:         12px !default;
 $bubble-padding-vertical:       8px !default;
@@ -484,6 +523,7 @@ $bubble-padding-horizontal:     15px !default;
 //
 
 $screen-xs:                     480px !default;
+$screen-xs-min:                 $screen-xs !default;
 
 $screen-sm:                     768px !default;
 $screen-sm-min:                 $screen-sm !default;
@@ -498,8 +538,23 @@ $screen-xs-max:                 ($screen-sm-min - 1) !default;
 $screen-sm-max:                 ($screen-md-min - 1) !default;
 $screen-md-max:                 ($screen-lg-min - 1) !default;
 
+$redmine-responsive-max:        899px !default;
+$redmine-responsive-min:        900px !default;
+
 $top-menu-collapse-breakpoint:  $screen-lg-min !default;
-$main-menu-collapse-breakpoint: $screen-lg-min !default;
+
+
+//== Login form
+//
+
+$login-form-width:              24em !default;
+$login-form-label-width:        8em !default;
+$login-form-box-breakpoint:     $screen-xs-min !default;
+$login-form-adjustments-map: (
+  -2: da en en-GB ko pl tr uk,
+  1: fr hr nl sr-YU sv,
+  2: el eu lt pt sk sr th
+) !default;
 
 
 //== Content widths

src/sass/application.scss

@@ -2,6 +2,8 @@
 @import "mixins";
 
 @import "lib/normalize";
+@import "lib/font-awesome";
+
 
 //== Redmine's core elements
 //
@@ -19,6 +21,7 @@
 @import "components/login";
 @import "components/admin";
 @import "components/coderay";
+@import "components/rouge";
 @import "components/gantt";
 @import "components/calendar";
 @import "components/progress";
@@ -26,10 +29,12 @@
 @import "components/elements";
 @import "components/jquery-ui";
 @import "components/icons";
+@import "components/dropdown";
 @import "components/top";
 @import "components/jstoolbar";
 @import "components/flash";
 @import "components/image-base64";
+@import "components/responsive";
 @import "components/print";
 
 

src/sass/components/_admin.scss

@@ -3,6 +3,18 @@
 // --------------------------------------------------
 
 #admin-menu {
+  ul:nth-child(n) {
+    li {
+      list-style-type: none;
+
+      > a:not(.icon-only) {
+        padding-left: $sidebar-padding-horizontal + 5px + 20px;
+        background-repeat: no-repeat;
+        background-position: $sidebar-padding-horizontal center;
+      }
+    }
+  }
+
   #admin-index > & {
     ul {
       margin: 0;
@@ -19,22 +31,11 @@
       background-position: 0 center;
     }
   }
-
-    li {
-        list-style-type: none;
-
-        > a {
-            padding-left: $sidebar-padding-horizontal + 5px + 20px;
-            background-repeat: no-repeat;
-            background-position: $sidebar-padding-horizontal center;
-        }
-    }
 }
 
 
-/**
- * Groups
- */
+//== Groups
+//
 
 table.members,
 table.memberships {
@@ -44,9 +45,8 @@ table.memberships {
 }
 
 
-/**
- * Permissions
- */
+//== Permissions
+//
 
 table.permissions {
   td.role {
@@ -58,9 +58,8 @@ table.permissions {
 }
 
 
-/**
- * Workflows
- */
+//== Workflows
+//
 
 table.transitions {
   td.enabled {
@@ -88,36 +87,16 @@ table.fields_permissions {
 }
 
 
-/**
- * Enumerations
- */
-
-.controller-enumerations.action-index {
-    #content {
-        > h3,
-        > .list {
-            margin-bottom: $line-height-computed / 2;
-        }
-
-        > p {
-            margin-bottom: $line-height-computed * 2;
-        }
-    }
-}
-
-
-/**
- * Settings labels
- */
+//== Settings labels
+//
 
 fieldset.settings label {
   display: block;
 }
 
 
-/**
- * Settings -> Notifications
- */
+//== Settings -> Notifications
+//
 
 fieldset#notified_events {
   .parent {
@@ -126,9 +105,8 @@ fieldset#notified_events {
 }
 
 
-/**
- * Settings -> Repositories
- */
+//== Settings -> Repositories
+//
 
 .settings.enabled_scm {
   table {

src/sass/components/_base.scss

@@ -4,6 +4,7 @@
 
 html {
   overflow-y: scroll;
+  tab-size: 4;
 }
 
 body {
@@ -41,6 +42,19 @@ a {
   }
 }
 
+// Remove the tapping delay on clickable elements
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea,
+[tabindex] {
+  touch-action: manipulation;
+}
+
 h1 {
   margin: 0;
   font-size: 2em;             // ~28px
@@ -127,6 +141,11 @@ hr {
   margin-bottom: $line-height-computed;
   border: 0;
   border-top: 1px solid $hr-border;
+
+  li & {
+    margin-top:    $line-height-computed / 2;
+    margin-bottom: $line-height-computed / 2;
+  }
 }
 
 abbr[title] {

src/sass/components/_buttons.scss

@@ -4,21 +4,25 @@
 
 input[type="button"],
 input[type="submit"],
+input[type="reset"],
 button {
+  @include button-size($btn-padding-vertical, $btn-padding-horizontal, $font-size-base, $line-height-base, $border-radius-base);
   display: inline-block;
   margin-bottom: 0;
+  transition: background-color ease-in-out .07s,
+              border-color ease-in-out .07s,
+              box-shadow ease-in-out .07s;
   border: 1px solid;
   font-weight: $btn-font-weight;
   text-align: center;
   white-space: nowrap;
   cursor: pointer;
-    @include button-size($btn-padding-vertical, $btn-padding-horizontal, $font-size-base, $line-height-base, $border-radius-base);
-    @include user-select(none);
-    @include transition(background-color ease-in-out .07s, border-color ease-in-out .07s, box-shadow ease-in-out .07s);
-    @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+  user-select: none;
+  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); // scss-lint:disable DeclarationOrder
 
   &:hover,
   &:focus {
+    outline: 0;
     text-decoration: none;
   }
 
@@ -29,16 +33,15 @@ button {
   &.disabled,
   &[disabled],
   fieldset[disabled] & {
-        pointer-events: none; // Future-proof disabling of clicks
+    opacity: .65;
     box-shadow: none;
-        @include opacity(.65);
+    pointer-events: none; // Future-proof disabling of clicks
   }
 }
 
 
-/**
- * Form buttons layout
- */
+//== Form buttons layout
+//
 
 form {
   input[type="submit"] {
@@ -50,26 +53,25 @@ form {
 
     + a {
       margin-right: 5px;
-        }
 
-        + a + a {
+      + 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 {
@@ -82,48 +84,127 @@ form[action*="repository/diff"] {
 }
 
 
-/**
- * Query builder buttons
- */
+//== Button links
+//
+p.buttons,
+.other-formats > span,
+#wiki_add_attachment > p {
+  > a {
+    display: inline-block;
+    padding: $btn-padding-vertical $btn-padding-horizontal-small;
+    border: 1px solid $pagination-border;
+    border-radius: $border-radius-base;
+    background-color: $pagination-bg;
+
+    &:hover,
+    &:focus {
+      border-color: $pagination-hover-border;
+      outline: 0;
+      background-color: $pagination-hover-bg;
+      text-decoration: none;
+    }
+
+    &:active {
+      outline: 0;
+      box-shadow: inset 0 3px 4px -2px rgba(#000, .1);
+    }
+
+    &.icon {
+      padding-left: 20px + $btn-padding-horizontal-small;
+      background-position: $btn-padding-horizontal-small 50%;
+    }
+
+    @if $use-font-awesome == false {
+      &.atom {
+        padding-left: 20px + $btn-padding-horizontal-small;
+        background-position: $btn-padding-horizontal-small 50%;
+      }
+    }
+  }
+}
+
+
+//== Action buttons group
+//
+
+p.buttons {
+  margin-bottom: $line-height-computed;
+}
+
+
+//== Export actions
+//
+
+.other-formats {
+  margin: $line-height-computed 0 0;
+  text-align: right;
+
+  .pagination + &,
+  #wiki_add_attachment + & {
+    margin-top: 0;
+    float: right;
+  }
+}
+
+
+//== Query builder buttons
+//
 
 .query-columns {
   select {
-        // scss-lint:disable ImportantRule
-        width: auto !important;
+    width: auto !important; // scss-lint:disable ImportantRule
+    min-width: 130px;
+  }
+
+  @at-root span#{&} {
+    > span {
+      display: inline-block;
+      height: 100%;
+      vertical-align: middle;
+    }
+
+    label {
+      display: block;
+      margin-bottom: $line-height-computed / 2;
+    }
   }
 
   .buttons {
     vertical-align: middle;
 
+    br {
+      display: none;
+    }
+
     input[type="button"] {
+      display: block;
       width: 32px;
       margin-bottom: 4px;
       padding-right: 1px;
       padding-left: 1px;
-            @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
+      @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); // scss-lint:disable DeclarationOrder
     }
   }
 }
 
 
-/**
- * Button for toggling multiselect (in filters)
- */
+//== Button for toggling multiselect (in filters)
+//
 
 a[data-expands],
 .toggle-multiselect {
+  @extend %image-toggle-plus;
   position: relative;
   top: 3px;
   padding: 2px 8px;
   border: 1px solid;
   border-radius: $border-radius-base;
-    @extend %image-toggle-plus;
   background-repeat: no-repeat;
   background-position: 2px 2px;
-    cursor: pointer;
   vertical-align: top;
-    @include user-select(none);
-    @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
+  cursor: pointer;
+  user-select: none;
+  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); // scss-lint:disable DeclarationOrder
 }
 
 a[data-expands] {
@@ -131,6 +212,12 @@ a[data-expands] {
   margin-right: 10px;
   padding: 10px;
 
+  > .toggle-multiselect {
+    padding: 0;
+    border: 0 none;
+    background: transparent;
+  }
+
   img {
     display: none;
   }

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;
-        }
-    }
-
-    .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 {
+      background: transparent;
+      color: #0c0;
+      font-weight: $font-weight-bold;
+    }
+
     .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 {
-            background: transparent;
-            color: #0c0;
-            font-weight: $font-weight-bold;
-        }
   }
 
-    .delete .delete {
+  .delete {
+    background: hsla(0, 100%, 50%, .12);
+
+    .delete {
       background: transparent;
       color: #c00;
       font-weight: $font-weight-bold;
     }
 
-    .change .change {
-        color: #88f;
+    .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);
+    }
   }
 
-    .head .head {
+  .change {
+    background: #007;
+    color: #bbf;
+
+    .change {
+      color: #88f;
+    }
+  }
+
+  .head {
+    background: #505;
+    color: #f8f;
+
+    .head {
       color: #f4f;
     }
+
+    .filename {
+      color: #fff;
+    }
+  }
 }

src/sass/components/_content.scss

@@ -1,8 +1,5 @@
 #main {
   @if $flexbox-layout {
-        // scss-lint:disable VendorPrefix
-        display: -ms-flexbox;
-        display: -webkit-flex;
     display: flex;
   } @else {
     @extend %clearfix;
@@ -18,12 +15,9 @@
   padding: $padding-side;
 
   @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;
   }
@@ -35,21 +29,29 @@
 // --------------------------------------------------
 
 #sidebar {
-    // scss-lint:disable VendorPrefix
+  #main & {
     padding: $padding-side $sidebar-padding-horizontal;
+  }
+
+  #main.nosidebar & {
+    margin: 0;
+    padding: 0;
+    border: 0 none;
+
+    @if $flexbox-layout {
+      flex: 0 0 auto;
+    } @else {
+      width: 0;
+      float: none;
+    }
+  }
 
   @if $flexbox-layout {
-        -webkit-flex: 0 0 $sidebar-width-computed;
-        -ms-flex: 0 0 $sidebar-width-computed;
     flex: 0 0 $sidebar-width-computed;
 
     @if $sidebar-position == "left" {
-            -webkit-order: -1;
-            -ms-flex-order: -1;
       order: -1;
     } @else {
-            -webkit-order: 1;
-            -ms-flex-order: 1;
       order: 1;
     }
   } @else {
@@ -71,22 +73,6 @@
     }
   }
 
-    .nosidebar & {
-        margin: 0;
-        padding: 0;
-        border: 0 none;
-
-        @if $flexbox-layout {
-            // scss-lint:disable VendorPrefix
-            -webkit-flex: 0 0 auto;
-            -ms-flex: 0 0 auto;
-            flex: 0 0 auto;
-        } @else {
-            width: 0;
-            float: none;
-        }
-    }
-
   h3 {
     margin-top: $line-height-computed * 1.5;
   }
@@ -97,22 +83,22 @@
   }
 
   ul {
+    &:nth-child(n) {
       margin: 0 0 ($line-height-computed / 2);
       padding: 0;
 
       @if $sidebar-position == "left" {
         margin-right: -($sidebar-padding-horizontal);
-        } @else {
-            margin-left: -($sidebar-padding-horizontal);
       }
     }
 
+    &:not(.watchers) {
       li {
         margin: 0;
         padding: 0;
         list-style-type: none;
 
-        > a {
+        > a:not(.icon-only) {
           display: block;
           padding: $sidebar-padding-vertical $sidebar-padding-horizontal;
           border: 1px solid transparent;
@@ -150,6 +136,20 @@
         }
       }
     }
+  }
+
+  // Special treatment for anchor tags directly under sidebar tag
+  > a {
+    margin: $sidebar-padding-vertical $sidebar-padding-horizontal;
+
+    @if $sidebar-position == "left" {
+      margin-left: $sidebar-padding-horizontal + 3px;
+    } @else {
+      margin-right: $sidebar-padding-horizontal + 3px;
+      margin-left: 0;
+    }
+  }
+}
 
 #footer {
   margin: 0 $padding-side $line-height-computed;

src/sass/components/_dropdown.scss

@@ -0,0 +1,112 @@
+.drdn {
+  position: relative;
+
+  &.expanded {
+    > .drdn-content {
+      display: block;
+    }
+  }
+
+  &-trigger {
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  &-content {
+    @include nice-shadow(2);
+    display: none;
+    position: absolute;
+    z-index: 1002;
+    top: $input-height-base + $btn-padding-vertical;
+    right: 0;
+    min-width: 150px;
+    overflow: hidden;
+    border-radius: $border-radius-base;
+    background: $body-bg;
+  }
+
+  &-items {
+    max-height: 400px;
+    overflow: auto;
+    color: $gray-light;
+
+    &:empty {
+      border: 0;
+    }
+
+    &.selection {
+      > a,
+      > span {
+        &::before {
+          content: " ";
+          display: inline-block;
+          width: 1em;
+          font-weight: $font-weight-bold;
+        }
+
+        @if $use-font-awesome {
+          @extend %fa-icon;
+        }
+      }
+
+      > .selected::before {
+        @if $use-font-awesome {
+          content: $fa-var-check;
+        } @else {
+          content: "\2713 ";
+        }
+      }
+    }
+
+    > a,
+    > span {
+      display: block;
+      margin: 0;
+      padding: $btn-padding-vertical $btn-padding-horizontal-small;
+
+      &.icon {
+        padding-left: 20px + $btn-padding-horizontal-small;
+
+        &::before {
+          width: 20px;
+          margin-top: 3px;
+          float: left;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+
+.contextual {
+  .drdn {
+    &-trigger {
+      > .icon-only::before {
+        margin: 0 1px;
+      }
+    }
+
+    &-items {
+      padding: 3px;
+
+      a,
+      span {
+        padding-top: $pagination-padding-vertical;
+        padding-bottom: $pagination-padding-vertical;
+        border: 1px solid transparent;
+        border-radius: $border-radius-small;
+        color: $pagination-color;
+
+        &:hover {
+          border-color: $pagination-hover-border;
+          background-color: $pagination-hover-bg;
+          color: $pagination-hover-color;
+          text-decoration: none;
+        }
+      }
+    }
+  }
+}

src/sass/components/_elements.scss

@@ -3,139 +3,113 @@
 // --------------------------------------------------
 
 
-/**
- * Action buttons group
- */
-
-.buttons {
-    margin-top: $line-height-computed;
-    margin-bottom: $line-height-computed;
-}
-
-
-/**
- * Export actions
- */
-
-.other-formats {
-    margin: ($line-height-computed / 2) 0 0;
-    text-align: right;
-
-    span + span:before {
-        content: "/ ";
-    }
-
-    .pagination + &,
-    #wiki_add_attachment + & {
-        margin-top: 0;
-        float: right;
-    }
-
-    .pagination + & {
-        margin-top: $pagination-padding-vertical + 1px;
-    }
-}
-
-
-/**
- * Collapsible
- */
+//== Collapsible
+//
 
 a.collapsible,
 .collapsible > legend {
   color: $link-color;
   cursor: pointer;
-    @include user-select(none);
+  user-select: none;
 
   &:hover {
     color: $link-hover-color;
   }
 
-    &:before {
+  &::before {
+    content: "";
     display: inline-block;
     position: relative;
     top: -1px;
     width: 0;
     height: 0;
     margin-right: 3px;
+    transform: rotate(0);
     border-top:   6px solid;
     border-right: 4px solid transparent;
     border-left:  4px solid transparent;
-        content: "";
     vertical-align: middle;
-        @include rotate(0);
 
     @if $collapsible-animation-time > 0 {
-            @include transition-transform($collapsible-animation-time);
+      transition: transform $collapsible-animation-time;
     }
   }
 }
 
 a.collapsible.collapsed,
 .collapsible.collapsed > legend {
-    &:before {
-        @include rotate(-90deg);
+  &::before {
+    transform: rotate(-90deg);
   }
 }
 
 @if $collapsible-animation-time > 0 {
   fieldset.collapsible {
     min-height: $line-height-computed;
-        max-height: 2500px; // should be enough with all the possible filters
-        overflow: hidden;
-        @include transition(max-height $collapsible-animation-time ease-out);
+    max-height: $collapsible-max-height;
+    overflow: auto;
+    transition: max-height $collapsible-animation-time ease-out;
 
     > div {
-            // scss-lint:disable ImportantRule
-            display: block !important;
-            opacity: 1;
+      display: block !important; // scss-lint:disable ImportantRule
       visibility: visible;
-            @include transition(visibility 0s 0s, opacity $collapsible-animation-time);
+      transition: visibility 0s 0s, opacity $collapsible-animation-time;
+      opacity: 1;
     }
 
     &.collapsed {
       max-height: 0;
-            @include transition(max-height $collapsible-animation-time);
+      overflow: hidden;
+      transition: max-height $collapsible-animation-time;
 
       > div {
-                opacity: 0;
         visibility: hidden;
-                @include transition(visibility 0s $collapsible-animation-time, opacity $collapsible-animation-time);
+        transition: visibility 0s $collapsible-animation-time, opacity $collapsible-animation-time;
+        opacity: 0;
       }
     }
   }
 }
 
 
-/**
- * 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;
   float: right;
-    white-space: nowrap;
   cursor: default;
 
   input,
   select {
     font-size: .9em;
   }
+
+  a {
+    display: inline-block;
+    white-space: nowrap;
+  }
+
+  a,
+  .drdn {
+    margin-left: $padding-small-vertical;
+  }
+
+  > :first-child {
+    margin-left: 0;
+  }
 }
 
 
-/**
- * Accessibility specific styles
- */
+//== Accessibility specific styles
+//
 
 .hidden-for-sighted {
   position: absolute;
@@ -147,19 +121,17 @@ a.collapsible.collapsed,
 }
 
 
-/**
- * Responsive autoscroll
- */
+//== Responsive autoscroll
+//
 
 .autoscroll {
-    overflow-x: auto;
   margin-bottom: $line-height-computed;
+  overflow-x: auto;
 }
 
 
-/**
- * Container
- */
+//== Container
+//
 
 .box {
   margin-bottom: $line-height-computed;
@@ -176,12 +148,20 @@ a.collapsible.collapsed,
     background: transparent;
     box-shadow: none;
   }
+
+  &:last-child,
+  >:last-child {
+    margin-bottom: 0;
+  }
+
+  > h3 {
+    margin-bottom: $panel-body-padding-vertical;
+  }
 }
 
 
-/**
- * Column form layout
- */
+//== Column form layout
+//
 
 .splitcontent {
   @extend %clearfix;
@@ -189,8 +169,12 @@ a.collapsible.collapsed,
 
 .splitcontentleft,
 .splitcontentright {
+  box-sizing: border-box;
   width: 50%;
-    @include box-sizing(border-box);
+
+  > .wiki {
+    margin-bottom: $line-height-computed;
+  }
 }
 
 .splitcontentleft {
@@ -204,24 +188,22 @@ a.collapsible.collapsed,
 }
 
 
-/**
- * Watchers selection list
- */
+//== Watchers selection list
+//
 
 #users_for_watcher {
   height: 200px;
   overflow: auto;
 
   label {
+    @include check;
     display: block;
-        @include checkbox;
   }
 }
 
 
-/**
- * Watchers list
- */
+//== Watchers list
+//
 
 #watchers {
   select {
@@ -231,9 +213,9 @@ a.collapsible.collapsed,
 
   > .watchers {
     > li {
+      @extend %clearfix;
       display: block;
       margin-bottom: $sidebar-padding-vertical;
-            @extend %clearfix;
 
       @if $sidebar-position == "left" {
         padding-right: $sidebar-padding-horizontal;
@@ -241,7 +223,7 @@ a.collapsible.collapsed,
         padding-left: $sidebar-padding-horizontal;
       }
 
-            > a {
+      > a:not(.icon-only) {
         display: inline;
         padding: 0;
         background: transparent;
@@ -258,19 +240,32 @@ a.collapsible.collapsed,
       }
 
       img.gravatar {
-                position: relative;
-                top: 1px;
         margin-right: .5em;
-                vertical-align: top;
       }
     }
   }
 }
 
 
-/**
- * Subtitle paragraph (can be seen on activity list)
- */
+//== Users selection list
+//
+
+#principals {
+  label {
+    @include check;
+    display: block;
+  }
+}
+
+.roles-selection {
+  label {
+    @include check-inline;
+  }
+}
+
+
+//== Subtitle paragraph (can be seen on activity list)
+//
 
 p.subtitle {
   margin-top: ($line-height-computed / -2);
@@ -279,18 +274,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;
@@ -312,8 +297,8 @@ p.subtitle {
   }
 
   &.ui-sortable-handle {
-        outline: 1px solid $gray-lighter;
     overflow: hidden;
+    outline: 1px solid $gray-lighter;
 
     &:hover {
       outline: 1px solid $gray-light;
@@ -321,15 +306,14 @@ p.subtitle {
   }
 
   &.ui-sortable-placeholder {
-        // scss-lint:disable ImportantRule
+    visibility: visible !important; // scss-lint:disable ImportantRule
     outline: 1px dashed $highlight-border;
     background: $highlight-bg;
-        visibility: visible !important;
   }
 
   &.ui-sortable-helper {
-        background: $body-bg;
     @include nice-shadow(4);
+    background: $body-bg;
   }
 }
 
@@ -342,20 +326,62 @@ a.close-icon {
   width: 12px;
   height: 12px;
   margin-top: 5px;
+  overflow: hidden;
   background-image: url("../../../images/close.png");
   background-repeat: no-repeat;
   cursor: pointer;
-    overflow: hidden;
 
   &:hover {
     background-image: url("../../../images/close_hl.png");
   }
 }
 
+// For Redmine 3.4+
+#my-page {
+  .block-receiver {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    outline: none;
+  }
+
+  &.dragging .block-receiver {
+    box-sizing: border-box;
+    min-height: 20px;
+    margin: $padding-side / -2;
+    margin-bottom: $line-height-computed;
+    padding: $padding-side / 2;
+    outline: 2px dashed $gray-light;
+  }
+
+  .mypage-box {
+    > .contextual {
+      transition: opacity .2s;
+      opacity: 0;
+    }
+
+    &:hover > .contextual {
+      opacity: 1;
+    }
+  }
+
+  #list-left {
+    width: 50%;
+    padding-right: ($padding-side / 2);
+    float: left;
+  }
+
+  #list-right {
+    width: 50%;
+    padding-left: ($padding-side / 2);
+    float: right;
+  }
+}
+
+
+//== Resetting font for SCM (repository files)
+//
 
-/**
- * Resetting font for SCM (repository files)
- */
 #content table.filecontent {
   width: 100%;
   background: $body-bg;
@@ -428,9 +454,8 @@ a.close-icon {
 }
 
 
-/**
- * Projects list
- */
+//== Projects list
+//
 
 ul.projects {
   padding-left: $padding-side;
@@ -446,6 +471,33 @@ ul.projects {
 }
 
 #projects-index ul.projects {
+  @if $use-project-tiles {
+    &.root {
+      display: flex;
+      flex-wrap: wrap;
+      margin-right: -($padding-side / 2);
+      margin-left: -($padding-side / 2);
+
+      > li {
+        display: block;
+        box-sizing: border-box;
+        flex: 0 1 auto;
+        width: 100%;
+        margin-right: $padding-side / 2;
+        margin-left: $padding-side / 2;
+        padding: $panel-body-padding;
+        border: 1px solid $panel-border;
+        border-radius: $border-radius-base;
+        background-color: $panel-bg;
+        color: $panel-color;
+
+        @media screen and (min-width: $screen-sm-min) { width: calc(50% - #{$padding-side}); }
+        @media screen and (min-width: $screen-md-min) { width: calc(33.333% - #{$padding-side}); }
+        @media screen and (min-width: $screen-lg-min) { width: calc(25% - #{$padding-side}); }
+      }
+    }
+  }
+
   ul.projects {
     border-left: 2px solid $gray-lighter;
   }
@@ -484,9 +536,8 @@ ul.projects {
 }
 
 
-/**
- * Time report
- */
+//== Time report
+//
 
 #time-report {
   th {
@@ -531,9 +582,8 @@ ul.projects {
 }
 
 
-/**
- * Version issue list and page layout
- */
+//== Version issue list and page layout
+//
 
 div#roadmap {
   .related-issues {
@@ -587,36 +637,35 @@ div#version-summary {
 }
 
 
-/**
- * Add form bottom space
- */
+//== Add form bottom space
+//
 
 #new_document,
 #add-message,
-#add-news {
+#add-news,
+#edit-news {
   margin-bottom: $line-height-computed;
 }
 
 
-/**
- * Ajax indicator
- */
+//== Ajax indicator
+//
 
 #ajax-indicator {
+  @include nice-shadow(3);
   position: fixed;
+  z-index: 100;
   top: 50%;
   left: 50%;
   width: 200px;
   margin: (($line-height-computed + $padding-large-vertical * 2 + 1px * 2) / -2) ((200px + $padding-large-horizontal * 2 + 1px * 2) / -2);
   padding: $padding-large-vertical $padding-large-horizontal;
   border: 1px solid $highlight-border;
+  opacity: .9;
   background-color: $highlight-bg;
   color: $highlight-text;
   font-weight: $font-weight-bold;
   text-align: center;
-    @include nice-shadow(3);
-    opacity: .9;
-    z-index: 100;
 
   span {
     padding-left: 26px;
@@ -628,9 +677,8 @@ div#version-summary {
 }
 
 
-/**
- * Boards (forum)
- */
+//== Boards (forum)
+//
 
 tr.message {
   &.locked {
@@ -672,10 +720,15 @@ table.boards {
   }
 }
 
+div.table-list.boards {
+  .table-list-cell.name {
+    width: 30%;
+  }
+}
 
-/**
- * Topic page
- */
+
+//== Topic page
+//
 
 .controller-messages.action-show {
   h2 {
@@ -712,8 +765,8 @@ table.boards {
 
     .contextual {
       position: relative;
-            margin-right: $bubble-padding-vertical;
       z-index: 1;
+      margin-right: $bubble-padding-vertical;
 
       @if $use-font-awesome {
         margin-top: $padding-small-vertical;
@@ -738,8 +791,9 @@ table.boards {
       > h4 {
         position: relative;
 
-                &:before,
-                &:after {
+        &::before,
+        &::after {
+          content: " ";
           display: block;
           position: absolute;
           top: 9px;
@@ -749,18 +803,17 @@ table.boards {
           height: 0;
           border-style: solid solid outset;
           border-color: transparent;
-                    content: " ";
           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;
         }
@@ -780,9 +833,76 @@ table.boards {
 }
 
 
-/**
- * News comments
- */
+//== News
+//
+
+.news.box {
+  p > a:not(:last-child) {
+    display: inline-block;
+    margin-bottom: floor($line-height-computed / 4);
+    font-size: $font-size-h4;
+  }
+
+  .summary,
+  .author {
+    display: block;
+    margin-bottom: floor($line-height-computed / 4);
+
+    + br {
+      display: none;
+    }
+  }
+
+  .author {
+    margin-bottom: $line-height-computed;
+  }
+}
+
+#edit-news + p {
+  em {
+    display: block;
+    margin-bottom: floor($line-height-computed / 4);
+
+    + br {
+      display: none;
+    }
+  }
+}
+
+.news.box .summary,
+#edit-news + p em {
+  padding: floor($line-height-computed / 4) $padding-base-horizontal;
+  border-left: 4px solid $blockquote-border-color;
+}
+
+.news-article {
+  margin-bottom: $line-height-computed;
+  padding-top: $line-height-computed;
+  border-top: 1px solid $panel-border;
+
+  header {
+    h3 {
+      margin-bottom: .3em;
+      line-height: 1.2;
+
+      > a {
+        font-weight: $font-weight-bold;
+      }
+    }
+  }
+}
+
+.author {
+  color: $gray;
+
+  .user {
+    font-weight: $font-weight-bold;
+  }
+}
+
+
+//== News comments
+//
 
 #comments {
   > h4 {
@@ -800,9 +920,8 @@ table.boards {
 }
 
 
-/**
- * Diff
- */
+//== Diff
+//
 
 .text-diff {
   margin-bottom: $line-height-computed;
@@ -830,9 +949,8 @@ table.boards {
 }
 
 
-/**
- * Repository view
- */
+//== Repository view
+//
 
 .revision-info {
   margin-bottom: $line-height-computed;
@@ -904,12 +1022,6 @@ tr.changeset {
   }
 }
 
-.revision-graph {
-    circle {
-        // @include translate(0, $table-cell-padding - 1px);
-    }
-}
-
 #content #changes-legend {
   font-size: 1em;
 
@@ -935,22 +1047,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); }
   }
 

src/sass/components/_flash.scss

@@ -13,23 +13,20 @@
   padding-left: $padding-large-horizontal + 8px + 16px;
   border: 1px solid;
   border-radius: $border-radius-large;
+  background-repeat: no-repeat;
+  background-position: $padding-large-horizontal 50%;
 
   @if $use-font-awesome {
     @extend %fa-icon;
 
-        &:before {
+    &::before {
       margin-left: -(8px + 16px);
       float: left;
       line-height: $line-height-computed;
     }
-    } @else {
-        background-repeat: no-repeat;
-        background-position: $padding-large-horizontal 50%;
   }
 
-    p:last-child,
-    ol:last-child,
-    ul:last-child {
+  >:last-child {
     margin-bottom: 0;
   }
 }
@@ -40,11 +37,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 {
@@ -76,8 +77,14 @@
   padding-left: $padding-large-horizontal;
   text-align: center;
 
+  &.nodata-left {
+    &::before {
+      float: left;
+    }
+  }
+
   @if $use-font-awesome {
-        &:before {
+    &::before {
       margin-left: 0;
       float: none;
     }

src/sass/components/_forms.scss

@@ -8,7 +8,7 @@ form {
   }
 
   .contextual > & {
-        display: inline;
+    display: inline-block;
   }
 }
 
@@ -16,15 +16,24 @@ button,
 input,
 select,
 textarea {
+  box-sizing: border-box;
   font-family: inherit;
   font-size: $font-size-base;
   line-height: $line-height-base;
-    @include box-sizing(border-box);
+}
+
+%form-field {
+  height: $input-height-base;
+  padding: $input-padding-vertical $input-padding-horizontal;
+  border: 1px solid $input-border;
+  border-radius: $input-border-radius;
+  background-color: $input-bg;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
+  color: $input-color;
 }
 
 select,
 textarea,
-/*
 input[type="datetime"],
 input[type="datetime-local"],
 input[type="date"],
@@ -34,36 +43,34 @@ 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"],
 input[type="password"] {
-    height: $input-height-base;
-    padding: $input-padding-vertical $input-padding-horizontal;
-    border: 1px solid $input-border;
-    border-radius: $input-border-radius;
-    background-color: $input-bg;
-    color: $input-color;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
-    @include transition(border-color ease-in-out .1s, box-shadow ease-in-out .1s);
-    @include form-control-focus();
-    @include placeholder();
+  @extend %form-field;
+  @include form-control-focus;
+  @include placeholder;
+  transition: border-color ease-in-out .1s, box-shadow ease-in-out .1s;
 
   &[disabled],
   &[readonly],
   fieldset[disabled] & {
     border-color: $input-border;
+    opacity: 1;
     background-color: $input-bg-disabled;
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
-        opacity: 1;
   }
 }
 
 textarea {
-    resize: vertical;
   height: auto;
+  resize: vertical;
+
+  &.text_cf {
+    width: 100%;
+    resize: vertical;
+  }
 }
 
 input[type="search"] {
@@ -86,9 +93,10 @@ input[type="range"] {
   width: 100%;
 }
 
-input.autocomplete {
-    padding-right: 30px;
+input {
+  &.autocomplete {
     @extend %image-aci;
+    padding-right: 30px;
     background-repeat: no-repeat;
     background-position: right center;
 
@@ -97,6 +105,12 @@ input.autocomplete {
     }
   }
 
+  &.string_cf,
+  &.link_cf {
+    width: 100%;
+  }
+}
+
 select {
   &[multiple],
   &[size] {
@@ -110,15 +124,23 @@ select {
   option[disabled] {
     color: $gray-lighter;
   }
+
+  &.expandable {
+    vertical-align: top;
+  }
+
+  &.bool_cf {
+    width: auto !important; // scss-lint:disable ImportantRule
+  }
 }
 
 
-/**
- * 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] {
@@ -126,7 +148,7 @@ select {
     }
 
     option,
-        optgroup:before {
+    optgroup::before {
       padding: $input-padding-vertical $input-padding-horizontal;
       border-bottom: 1px dotted $gray-lighter;
     }
@@ -139,6 +161,7 @@ select {
 }
 
 // Google Chrome and Safari
+
 @supports (-webkit-appearance: none) {
   select[multiple] {
     padding: 0;
@@ -156,16 +179,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 {
@@ -174,9 +197,8 @@ legend {
 }
 
 
-/**
- * Required fields' asterisk
- */
+//== Required fields' asterisk
+//
 
 span.required {
   position: relative;
@@ -189,9 +211,8 @@ span.required {
 }
 
 
-/**
- * Field's hint
- */
+//== Field's hint
+//
 
 em.info {
   display: block;
@@ -202,9 +223,9 @@ em.info {
 }
 
 
-/**
- * Wiki editor
- */
+//== Wiki editor
+//
+
 .wiki-edit {
   color: $wiki-text;
   font-family: $font-family-monospace;
@@ -212,9 +233,8 @@ em.info {
 }
 
 
-/**
- * Tabular forms
- */
+//== Tabular forms
+//
 
 .tabular {
   &.settings {
@@ -229,10 +249,10 @@ em.info {
   }
 
   p {
+    @extend %clearfix;
     margin: 0 0 ($line-height-computed / 2);
     padding-left: $label-width + $label-space;
     clear: left;
-        @extend %clearfix;
 
     .jstEditor {
       margin-bottom: 0;
@@ -268,7 +288,7 @@ em.info {
     margin-left: -($label-width + $label-space);
     float: left;
     text-align: right;
-        @include user-select(none);
+    user-select: none;
 
     &.floating {
       width: 270px;
@@ -285,17 +305,10 @@ em.info {
       float: none;
       text-align: left;
       cursor: pointer;
-
-            > input {
-                margin-top: 0;
-                margin-left: -16px;
-                float: left;
-            }
     }
 
     &.inline {
       display: inline-block;
-            margin-right: 10px;
     }
 
     &.role-visibility {
@@ -309,10 +322,32 @@ em.info {
   }
 }
 
+label.inline {
+  display: inline-block;
+  margin-right: $padding-base-horizontal;
+  padding-left: 16px;
+  float: none;
+  text-align: left;
+  cursor: pointer;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+label.inline,
+label.block {
+  > input {
+    margin-top: .2em;
+    margin-left: -16px;
+    float: left;
+  }
+}
+
+
+//== 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;
@@ -323,19 +358,18 @@ 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] {
+  @include check;
   display: block;
   margin-bottom: $line-height-computed / 2;
-    @include checkbox;
 }
 
 
-/**
- * Input sizes
- */
+//== Input sizes
+//
 
 .wiki-edit,
 #principal_search,
@@ -354,23 +388,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;
@@ -389,20 +406,32 @@ select.bool_cf {
   }
 }
 
-/**
- * Add space below WYSIWYG
- */
+//== Add space below WYSIWYG
+//
 
 .jstEditor {
   margin-bottom: $line-height-computed / 2;
 }
 
+//== User form
+//
 
-/**
- * Attachments
- */
+#user_form {
+  @extend %clearfix;
+  margin-bottom: $line-height-computed;
 
-#attachments_fields {
+  ~ p {
+    margin-bottom: 0;
+  }
+}
+
+
+//== Attachments
+//
+
+#attachments_fields,
+#existing-attachments,
+.attachments_fields {
   > span {
     display: block;
     margin-bottom: $line-height-computed / 4;
@@ -412,14 +441,14 @@ select.bool_cf {
     width: 21.5em;
     margin-right: .5em;
     margin-bottom: $line-height-computed / 4;
-    }
 
-    input.filename {
+    &.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 {
     background-image: url("../../../images/hourglass.png");
@@ -444,9 +473,8 @@ select.bool_cf {
 }
 
 
-/**
- * Issue form elements
- */
+//== Issue form elements
+//
 
 #issue-form {
   fieldset {
@@ -458,9 +486,7 @@ select.bool_cf {
       }
     }
   }
-}
 
-#issue-form {
   .splitcontentleft,
   .splitcontentright {
     width: 100%;
@@ -497,15 +523,15 @@ select.bool_cf {
 }
 
 
-/**
- * Hack: first <p> in issue form ("private" option) is moved to the right with
- * inline styles. Don't allow it break the layout
- */
+//== #all_attributes > p[style] is targeting Redmine 2.x
+//
+
+#issue_is_private_wrap,
 #all_attributes > p[style] {
-    // scss-lint:disable ImportantRule
-    margin-right: 0 !important;
+  margin-right: 0 !important; // scss-lint:disable ImportantRule
   margin-bottom: 0;
   padding-left: 0;
+  float: right;
 
   input {
     top: 2px;
@@ -518,79 +544,49 @@ select.bool_cf {
 }
 
 
-#watchers_form {
-    overflow: hidden;
-
-    .search_for_watchers {
-        display: block;
-    }
-
-    // scss-lint:disable VendorPrefix
 #watchers_inputs {
   display: block;
   max-width: 64em;
-        margin-top: $input-padding-vertical + 1px;
+  max-height: $check-list-max-height;
   margin-bottom: $line-height-computed / 2;
-        -webkit-columns: 18em 3;
-           -moz-columns: 18em 3;
-                columns: 18em 3;
+  padding-top: $check-list-offset-top;
   overflow: auto;
-    }
+  columns: 18em 3;
 
   label.floating {
-        display: block;
-        width: auto;
-        margin: 0;
-        float: none;
-        @include checkbox;
-
-        input[type="checkbox"] {
-            top: -1px;
-        }
+    @include check-list;
   }
 }
 
 
-/**
- * Custom logic (boolean) field displayed as radio buttons
- */
+//== List of custom field values
+//
 
 .check_box_group {
   display: block;
+  width: 90%;
+  max-height: $check-list-max-height;
+  padding-top: $check-list-offset-top;
   overflow-y: auto;
 
   label {
-        display: block;
-        width: auto;
-        margin-bottom: 0;
-        margin-left: 0;
-        float: none;
-        font-weight: normal;
-        text-align: left;
+    @include check-list;
   }
 
+  // Boolean field displayed as inline radio buttons
   &.bool_cf {
+    overflow: initial;
+
     label {
       display: inline-block;
-            margin-right: 10px;
-            padding-left: 20px;
-            @include user-select(none);
-            @extend %clearfix;
-
-            input[type="checkbox"],
-            input[type="radio"] {
-                top: 0;
-                margin-left: -20px;
-                float: left;
-            }
+      margin-right: $check-input-margin-horizontal;
     }
   }
 }
 
 
-/**
- * Filters
- */
+//== Filters
+//
 
 fieldset#filters {
   table {
@@ -599,6 +595,10 @@ fieldset#filters {
     }
   }
 
+  .add-filter {
+    text-align: right;
+  }
+
   td {
     &.field {
       min-width: 180px;
@@ -615,6 +615,7 @@ fieldset#filters {
     }
 
     &.values {
+      min-width: 130px;
       white-space: nowrap;
 
       select {
@@ -624,16 +625,23 @@ fieldset#filters {
 
     &.add-filter {
       padding-top: $table-condensed-cell-padding * 2;
-            text-align: right;
       vertical-align: top;
     }
   }
+
+  div.add-filter {
+    padding-top: $table-condensed-cell-padding;
+    float: right;
+  }
+}
+
+#filters-table {
+  float: left;
 }
 
 
-/**
- * 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;

src/sass/components/_gantt.scss

@@ -6,10 +6,10 @@
   position: absolute;
   top: 0;
   height: 16px;
+  overflow: hidden;
   border: 1px solid $gray-lighter;
   border-left-width: 0;
   text-align: center;
-    overflow: hidden;
 
   &.nwday {
     background-color: $gray-lightest;
@@ -20,9 +20,9 @@
   font-size: $font-size-small;
 
   div {
+    @include text-overflow;
     height: 16px;
     line-height: 16px;
-        @include text-overflow;
   }
 }
 
@@ -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,9 +136,14 @@
 
   &:hover {
     z-index: 25;
+
+    .tip {
+      display: block;
+    }
   }
 
   .tip {
+    @include nice-shadow(3);
     display: none;
     position: absolute;
     top: 9px;
@@ -150,7 +155,6 @@
     color: $tooltip-text;
     font-size: $font-size-small;
     text-align: left;
-        @include nice-shadow(3);
   }
 
   @if $sidebar-position == "left" {
@@ -161,10 +165,4 @@
       }
     }
   }
-
-    &:hover {
-        .tip {
-            display: block;
-        }
-    }
 }

src/sass/components/_gravatar.scss

@@ -3,31 +3,31 @@
 // --------------------------------------------------
 
 img.gravatar {
+  position: relative;
+  top: -.15em;
+  overflow: hidden;
   border-radius: $border-radius-large;
   line-height: 1;
-    overflow: hidden;
   vertical-align: middle;
 
   h2 &,
   h3 &,
   h4 & {
-        position: relative;
-        top: -1px;
     margin-right: 5px;
   }
 }
 
 
-// For Administration -> /users
+//== Administration -> /users
+//
 
 .username img.gravatar {
-    position: relative;
-    top: 1px;
   margin-right: .5em;
-    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;

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==);
 }

src/sass/components/_issue.scss

@@ -12,9 +12,33 @@
     color: $issue-text;
     word-wrap: break-word;
 
-        @if $use-gravatars
-        {
+    @if $use-gravatars {
+      // For Redmine 3.4+
+      .gravatar-with-child {
+        position: relative;
+
         > img.gravatar {
+          top: 0;
+          width: $issue-gravatar-size;
+          height: $issue-gravatar-size;
+          margin-right: 10px;
+          margin-bottom: $line-height-computed / 2;
+          float: left;
+
+          &:nth-child(2) {
+            position: absolute;
+            top: $issue-gravatar-size * .6;
+            left: $issue-gravatar-size * .6;
+            width: $issue-gravatar-size * .5;
+            height: $issue-gravatar-size * .5;
+            border: 2px solid rgba(255, 255, 255, .9);
+            border-radius: 20%;
+          }
+        }
+      }
+
+      > img.gravatar {
+        top: 0;
         width: $issue-gravatar-size;
         height: $issue-gravatar-size;
         margin-right: 10px;
@@ -22,7 +46,7 @@
         float: left;
       }
 
-            table img.gravatar {
+      .assigned-to img.gravatar {
         position: relative;
         top: -3px;
         margin-right: 5px;
@@ -30,7 +54,7 @@
 
       > .subject,
       > .author {
-                padding-left: $issue-gravatar-size + 10px;
+        padding-left: $issue-gravatar-size * 1.1 + 10px;
       }
     }
 
@@ -128,7 +152,8 @@
   }
 
   @if $color-status {
-        .attributes td.status {
+    .attributes td.status,
+    .attribute.status .value {
       display: inline-block;
       width: auto;
       min-width: 1em;
@@ -143,18 +168,68 @@
       text-transform: uppercase;
     }
 
-        &.status-1 .attributes td.status {
+    &.status-1 {
+      .attributes td.status,
+      .attribute.status .value {
         background-color: $brand-info;
       }
+    }
 
-        &.closed .attributes td.status {
+    &.closed {
+      .attributes td.status,
+      .attribute.status .value {
         background-color: $brand-danger;
       }
     }
+  }
+
+  .splitcontentleft {
+    @media screen and (min-width: $screen-lg-min) {
+      width: auto;
+    }
+  }
+
+  .attribute {
+    @extend %clearfix;
+
+    .label,
+    .value {
+      padding: $issue-attribute-padding-v $issue-attribute-padding-h $issue-attribute-padding-v 0;
+    }
+
+    .label {
+      width: 25%;
+      float: left;
+
+      @media screen and (min-width: $screen-lg-min) {
+        width: 14em;
+      }
+    }
+
+    .value {
+      color: $gray-darkest;
+
+      @media screen and (min-width: $screen-lg-min) {
+        width: auto;
+        min-width: 14em + 16em;
+      }
+    }
+  }
+
+  table.progress {
+    width: 80px;
+  }
 
   div.attachments {
+    margin: 0;
+    padding: 0;
+    border-top: 0;
+  }
+
+  div.description + div.attachments {
     margin: $issue-padding (-$issue-padding) (-$issue-padding);
     padding: $issue-padding;
+    border-top: 1px solid $issue-border;
   }
 }
 
@@ -166,6 +241,11 @@ div.attachments {
   padding: $line-height-computed 0;
   border-top: 1px solid $issue-border;
 
+  @at-root .collapsible #{&} {
+    padding-top: 0;
+    border-top: 0;
+  }
+
   p {
     margin: 10px 0 0;
   }
@@ -230,6 +310,10 @@ div.thumbnails {
   .issues {
     margin: ($line-height-computed / 2) 0 0;
 
+    tr {
+      background-color: transparent;
+    }
+
     tr:last-child > td {
       border-bottom: 0 none;
     }
@@ -238,26 +322,17 @@ div.thumbnails {
       display: none;
     }
 
-        td.subject {
-            padding-left: 0;
+    td.done_ratio {
+      width: 80px;
     }
 
     td.buttons {
+      width: 3em;
       vertical-align: middle;
     }
   }
 }
 
-#relations {
-    td.checkbox {
-        display: none;
-    }
-
-    td.buttons {
-        padding: 0;
-    }
-}
-
 #new-relation-form {
   text-align: right;
 
@@ -280,7 +355,7 @@ div.thumbnails {
   &.hide-details {
     .journal,
     .details,
-        .first-of-notes:before {
+    .first-of-notes::before {
       display: none;
     }
 
@@ -292,7 +367,7 @@ div.thumbnails {
   &.hide-notes {
     .journal,
     .wiki,
-        .first-of-details:before {
+    .first-of-details::before {
       display: none;
     }
 
@@ -310,19 +385,19 @@ div.thumbnails {
     margin-left: $bubble-gravatar-size + $bubble-gravatar-space;
   }
 
-    &:before {
+  &::before {
+    content: "";
     display: block;
     position: absolute;
+    z-index: -1;
     top: -($line-height-computed + 2px);
     left: 22px;
     width: 4px;
     height: $line-height-computed;
     background-color: darken($body-bg, 5%);
-        content: "";
-        z-index: -1;
   }
 
-    .tabs + &:before {
+  .tabs + &::before {
     display: none;
   }
 
@@ -334,14 +409,39 @@ div.thumbnails {
       border-color: darken($issue-border, 25%);
 
       @if $use-gravatars {
-                h4:before {
+        h4::before {
           border-right-color: darken($issue-border, 25%);
         }
       }
     }
   }
 
-    h4 {
+  // For Redmine 4.0+
+  > div > .contextual {
+    position: relative;
+    z-index: 1;
+    margin: 0;
+    padding: $bubble-padding-vertical $bubble-padding-horizontal;
+    font-size: $font-size-list;
+
+    > .journal-actions > a {
+      opacity: .5;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    > a.journal-link {
+      color: $gray;
+
+      &::before {
+        content: "";
+      }
+    }
+  }
+
+  > div > h4 {
     margin: 0;
     padding: $bubble-padding-vertical $bubble-padding-horizontal;
     border-radius: $panel-border-radius $panel-border-radius 0 0;
@@ -363,11 +463,12 @@ div.thumbnails {
   }
 
   @if $use-gravatars {
-        h4 {
+    > div > h4 {
       position: relative;
 
-            &:before,
-            &:after {
+      &::before,
+      &::after {
+        content: " ";
         display: block;
         position: absolute;
         top: 9px;
@@ -377,23 +478,23 @@ div.thumbnails {
         height: 0;
         border-style: solid solid outset;
         border-color: transparent;
-                content: " ";
         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;
       }
 
       > .gravatar {
+        top: 0;
         margin-top: $line-height-computed - $bubble-gravatar-size;
         margin-left: -($bubble-gravatar-size + $bubble-gravatar-space + $bubble-padding-horizontal + 1px);
         float: left;
@@ -405,9 +506,9 @@ div.thumbnails {
     margin: 0;
     padding: $bubble-padding-vertical 0;
     padding-left: $bubble-padding-horizontal * 3;
+    list-style: none;
     border-top: 1px solid mix($body-bg, $issue-border, 50%);
     font-size: $font-size-list;
-        list-style: none;
 
     li {
       position: relative;
@@ -417,7 +518,8 @@ div.thumbnails {
         margin-bottom: 0;
       }
 
-            &:before {
+      &::before {
+        content: "";
         display: block;
         position: absolute;
         top: 5px;
@@ -426,7 +528,6 @@ div.thumbnails {
         height: 6px;
         border-radius: 50%;
         background-color: $gray-light;
-                content: "";
       }
     }
 
@@ -435,6 +536,15 @@ div.thumbnails {
     }
   }
 
+  .thumbnails {
+    margin: 0;
+    padding: 0 $bubble-padding-horizontal $bubble-padding-vertical;
+
+    img {
+      vertical-align: middle;
+    }
+  }
+
   .wiki,
   form {
     padding: $issue-padding;
@@ -486,7 +596,7 @@ div.thumbnails {
   > div {
     border-left-color: $brand-warning;
 
-        h4:before {
+    h4::before {
       border-right-color: $brand-warning;
     }
   }
@@ -527,25 +637,23 @@ span.private {
 
   div.changeset {
     margin-top: $line-height-computed / 2 + 2px * 2;
+    overflow: hidden;
     border: 1px solid $issue-border;
     border-radius: $panel-border-radius;
     background-color: $issue-bg;
     font-size: $font-size-list;
-        overflow: hidden;
 
     &:first-of-type {
       margin-top: 0;
     }
 
     > p {
+      @include clearfix;
       margin: 0;
       padding: $padding-base-vertical $padding-base-horizontal;
       color: $gray;
-            @include clearfix;
 
       > a {
-                margin-left: .5em;
-                float: right;
         font-family: $font-family-monospace;
         font-weight: $font-weight-bold;
       }

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;
@@ -58,24 +56,23 @@
     }
 
     .ui-icon {
-            background-image: url("/stylesheets/jquery/images/ui-icons_ffffff_256x240.png");
+      background-image: url("../../../stylesheets/jquery/images/ui-icons_ffffff_256x240.png");
     }
   }
 }
 
 
-/**
- * Interaction states
- */
+//== Interaction states
+//
 
 .ui-state-default,
 .ui-widget-content .ui-state-default,
 .ui-widget-header .ui-state-default {
   border: 1px solid $component-border;
   background: $component-bg;
-    color: $component-color;
-    font-weight: normal;
   box-shadow: none;
+  color: $component-color;
+  font-weight: $font-weight-normal;
 }
 
 .ui-state-default a,
@@ -94,7 +91,7 @@
   border: 1px solid $component-active-border;
   background: $component-active-bg;
   color: $component-active-color;
-    font-weight: normal;
+  font-weight: $font-weight-normal;
 }
 
 .ui-state-hover a,
@@ -115,10 +112,10 @@
   border: 1px solid $component-active-border;
   background: $component-active-bg;
   color: $component-active-color;
-    font-weight: normal;
+  font-weight: $font-weight-normal;
 
   .ui-icon {
-        background-image: url("/stylesheets/jquery/images/ui-icons_ffffff_256x240.png");
+    background-image: url("../../../stylesheets/jquery/images/ui-icons_ffffff_256x240.png");
   }
 }
 
@@ -134,14 +131,13 @@
 }
 
 
-/**
- * Menu (e.g. autocomplete)
- */
+//== Menu (e.g. autocomplete)
+//
 
 .ui-menu {
+  @include nice-shadow(2);
   padding: 3px;
   border-radius: $panel-border-radius;
-    @include nice-shadow(2);
 }
 
 .ui-menu-item {
@@ -149,13 +145,12 @@
 }
 
 
-/**
- * Dialogs
- */
+//== Dialogs
+//
 
 .modal {
-    background: $body-bg;
   z-index: 50;
+  background: $body-bg;
 
   h3.title {
     display: none;
@@ -169,14 +164,14 @@
 
 .ui-dialog {
   &.ui-widget-content {
+    @include nice-shadow(5);
     padding: 3px;
     border: 0 none;
-        @include nice-shadow(5);
-    }
 
     .ui-dialog-content {
       padding: 1em;
     }
+  }
 
   .ui-dialog-titlebar-close {
     right: .5em;
@@ -192,20 +187,19 @@
 }
 
 
-/**
- * Datepicker
- */
+//== Datepicker
+//
 
 img.ui-datepicker-trigger {
   margin-left: 4px;
-    cursor: pointer;
   vertical-align: middle;
+  cursor: pointer;
 }
 
 .ui-datepicker {
+  @include nice-shadow(3);
   padding: .3em .6em .6em;
   border: 0 none;
-    @include nice-shadow(3);
 
   .ui-datepicker-header {
     margin: 0 -.3em;
@@ -294,9 +288,9 @@ img.ui-datepicker-trigger {
   }
 
   .ui-datepicker-buttonpane {
+    @include clearfix;
     margin: .6em 0 0;
     padding: .6em 0 0;
-        @include clearfix;
 
     button {
       margin: 0;

src/sass/components/_jstoolbar.scss

@@ -2,26 +2,69 @@
 // WYSIWYG icons
 // --------------------------------------------------
 
+// For Redmine 4.0+
+#content {
+  div.jstTabs.tabs {
+    height: auto;
+    @if $flexbox-layout {
+      @media screen and (max-width: $redmine-responsive-max) {
+        clear: both;
+      }
+    }
+
+    ul {
+      width: 100%;
+      height: auto;
+
+      li {
+        height: auto;
+        margin: 0;
+
+        &::before {
+          content: none;
+        }
+
+        &:not(.tab-elements) {
+          @if $flexbox-layout {
+            align-self: flex-end;
+          }
+
+          .selected {
+            border-color: $input-border $input-border $tab-active-bg;
+          }
+        }
+
+        &.tab-elements {
+          margin-left: 5px;
+        }
+      }
+    }
+
     .jstElements {
+      height: auto;
+    }
+  }
+
+  .jstEditor {
+    .wiki-preview {
+      padding: $input-padding-vertical $input-padding-horizontal;
+      border: 1px solid $input-border;
+      border-radius: $input-border-radius;
+      background-color: $wiki-preview-bg;
+
+      p {
+        padding: 0;
+      }
+    }
+  }
+}
+
+div.jstElements {
   @extend %clearfix;
 
   .box & {
     padding: 0;
-    }
 
-    button {
-        margin-bottom: 5px;
-        box-shadow: none;
-        vertical-align: top;
-    }
-
-    .jstb_help {
-        margin-right: 0;
-        margin-left: -6px;
-        float: right;
-    }
-
-    .box & {
     button {
       margin-right: 2px;
     }
@@ -30,6 +73,14 @@
       margin-right: 4px;
     }
 
+    @media (min-width: $screen-md) {
+      .jstb_help {
+        margin-right: 0;
+        margin-left: -6px;
+        float: right;
+      }
+    }
+
     @media (min-width: $screen-lg) {
       button {
         margin-right: 4px;
@@ -40,125 +91,131 @@
       }
     }
   }
-}
 
-@if $use-font-awesome
-{
-    .jstElements {
-        %jstb-icon {
+  button {
+    margin-bottom: 5px;
     padding: 0;
-            background: $body-bg;
-            background-image: none;
+    background-color: $body-bg;
+    box-shadow: none;
     color: $btn-default-color;
-            @include fa-icon();
+    vertical-align: top;
 
-            &:before {
+    &::before {
       text-align: center;
     }
   }
+}
+
+@if $use-font-awesome {
+  .jstElements {
+    %jstb-icon {
+      @include fa-icon;
+      background-image: none;
+    }
 
     .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 { content: $fa-var-header; font-size: .7857em; }
     }
 
     .jstb_h3 {
       @extend %jstb-icon;
 
-            &:before { font-size: .6429em; content: $fa-var-header; }
+      &::before { content: $fa-var-header; font-size: .6429em; }
     }
 
     .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,
     // For plugin https://github.com/mediatainment/redmine_codebutton
     .jstb_codehighlight {
       @extend %jstb-icon;
       color: $brand-danger;
 
-            &:before { content: $fa-var-code; }
+      &::before { content: $fa-var-code; }
     }
 
     button.jstb_help {
@@ -169,7 +226,7 @@
         color: $link-hover-color;
       }
 
-            &:before { content: $fa-var-question-circle; }
+      &::before { content: $fa-var-question-circle; }
     }
   }
 }

src/sass/components/_list.scss

@@ -11,13 +11,12 @@ table.list {
     margin-bottom: 0;
   }
 
-    @if $table-list-highlight-rows {
-        > tbody > tr:hover {
-            background-color: $table-bg-hover;
-        }
+  &.changesets {
+    margin-bottom: $line-height-computed;
   }
 
-    th {
+  th,
+  .table-list-header {
     padding: $table-cell-padding;
     border: 2px solid $table-border-color;
     border-width: $table-list-header-border;
@@ -29,20 +28,26 @@ table.list {
     }
   }
 
+  tr.ui-sortable-helper {
+    background-color: $highlight-bg;
+  }
+
+  @if $table-list-highlight-rows {
+    > tbody > tr:hover {
+      background-color: $table-bg-hover;
+    }
+  }
+
   td {
     padding: $table-cell-padding;
     border: 1px solid $table-border-color;
     border-width: $table-list-item-border;
-        text-align: left;
+    text-align: center;
     vertical-align: top;
 
-        &.checkbox {
-            width: 15px;
-            padding: $table-cell-padding 0 0;
-            text-align: center;
-
-            input {
-                margin: 2px 0 0;
+    @if $use-font-awesome {
+      &.icon {
+        padding-left: $table-cell-padding + 20px;
       }
     }
 
@@ -58,38 +63,81 @@ table.list {
       text-align: right;
     }
 
-        &.estimated_hours,
-        &.remaining_hours,
-        &.spent_hours,
-        &.story_points,
-        &.int,
-        &.float {
+    &.reorder {
+      white-space: nowrap;
+    }
+
+    &.attachments a {
+      display: block;
+    }
+  }
+
+  th,
+  td {
+    &.checkbox {
+      width: 15px;
+      padding-right: $table-cell-padding;
+      padding-left: $table-cell-padding;
+
+      input {
+        margin: 2px 0 0;
+      }
+    }
+
+    &.id {
       text-align: right;
     }
 
+    &.activity,
+    &.assigned_to,
+    &.attachments,
+    &.author,
+    &.category,
+    &.comments,
+    &.description,
+    &.fixed_version,
+    &.last_notes,
+    &.last_updated_by,
+    &.name,
+    &.priority,
+    &.relations,
+    &.roles,
+    &.status,
+    &.string,
+    &.subject,
+    &.text,
+    &.tracker,
+    &.user {
+      text-align: left;
+    }
+
+    &.estimated_hours,
+    &.float,
+    &.int,
+    &.remaining_hours,
+    &.spent_hours,
+    &.story_points {
+      text-align: right;
+    }
+  }
+
+  td,
+  div {
     &.buttons {
       text-align: right;
       white-space: nowrap;
 
       a {
         padding-right: 5px;
+
+        &.icon-only {
+          padding: 0;
         }
       }
 
-        &.project,
-        &.created_on,
-        &.updated_on,
-        &.start_date,
-        &.due_date,
-        &.is_private,
-        &.reorder,
-        &.bool,
-        &.date {
-            text-align: center;
+      img {
+        vertical-align: middle;
       }
-
-        &.reorder {
-            white-space: nowrap;
     }
   }
 
@@ -99,6 +147,12 @@ table.list {
   }
 }
 
+.table-list-cell {
+  display: table-cell;
+  padding: $table-cell-padding;
+  vertical-align: top;
+}
+
 tr.project {
   .name a {
     white-space: nowrap;
@@ -111,16 +165,15 @@ tr.project {
     color: #aaa;
   }
 
-    &.idnt .name span {
-        padding-left: 16px;
+  &.idnt td.name {
     @extend %image-arrow-right;
     background-repeat: no-repeat;
-        background-position: -5px 50%;
   }
 
   @for $i from 1 through 9 {
-        &.idnt-#{$i} .name {
-            padding-left: $table-cell-padding + 16px * ($i - 1);
+    &.idnt-#{$i} td.name {
+      padding-left: $table-cell-padding + 16px * $i;
+      background-position: ($table-cell-padding + 16px * ($i - 1) - 3px) 50%;
     }
   }
 }
@@ -129,14 +182,14 @@ tr.issue {
   text-align: center;
   white-space: nowrap;
 
-    &.string,
-    &.text,
+  .string,
+  .text,
   .subject,
   .category {
     white-space: normal;
   }
 
-    &.relations {
+  .relations {
     text-align: left;
     white-space: normal;
 
@@ -145,23 +198,6 @@ tr.issue {
     }
   }
 
-    &.done_ratio table.progress {
-        margin-right: auto;
-        margin-left: auto;
-    }
-
-    &.idnt .subject a {
-        padding-left: 16px;
-        @extend %image-arrow-right;
-        background-repeat: no-repeat;
-
-        @if $color-trackers {
-            background-position: 0 0;
-        } @else {
-            background-position: -5px 0;
-        }
-    }
-
   .controller-issues.action-index & {
     &.assigned-to-me {
       .assigned_to,
@@ -173,16 +209,23 @@ tr.issue {
     }
   }
 
+  &.idnt td.subject {
+    @extend %image-arrow-right;
+    background-repeat: no-repeat;
+  }
+
   @for $i from 1 through 9 {
-        &.idnt-#{$i} .subject {
-            padding-left: $table-cell-padding + 16px * ($i - 1);
+    &.idnt-#{$i} td.subject {
+      padding-left: $table-cell-padding + 16px * $i;
+      background-position: ($table-cell-padding + 16px * ($i - 1) - 3px) 50%;
     }
   }
 }
 
 .issues {
-    .description {
-        padding: 0;
+  .description,
+  .last_notes {
+    padding: $table-cell-padding;
     text-align: left;
 
     @media screen and (min-width: $screen-sm-min) {
@@ -201,13 +244,13 @@ tr.issue {
 
 tr {
   span.expander {
+    @extend %image-toggle-plus;
     margin-left: 0;
     padding-left: 8px;
-        @extend %image-toggle-plus;
     background-repeat: no-repeat;
     background-position: center center;
     cursor: pointer;
-        @include user-select(none);
+    user-select: none;
   }
 
   &.open span.expander {
@@ -265,12 +308,26 @@ tr.entry {
   }
 }
 
+@if $table-list-color-odd-rows {
+  table.list:not(.odd-even) tbody tr:nth-child(odd),
+  .odd {
+    background-color: $table-bg-accent;
+  }
+}
+
+@if $table-list-color-even-rows {
+  table.list:not(.odd-even) tbody tr:nth-child(even),
+  .even {
+    background-color: $table-bg-accent;
+  }
+}
+
+
+//== Priorities
+//
 
-/**
- * Priorities
- */
-// scss-lint:disable SpaceAfterComma
 @if $color-priorities {
+  // scss-lint:disable SpaceAfterComma
   @include priority(".priority-lowest",  $priority-lowest-bg,  $priority-lowest-text,  $priority-lowest-link);
   @include priority(".priority-default", $priority-default-bg, $priority-default-text, $priority-default-link);
   @include priority(".priority-high3",   $priority-high3-bg,   $priority-high3-text,   $priority-high3-link);
@@ -309,20 +366,20 @@ tr.entry {
       color: mix($tracker-default-text, $tracker-default-bg, 75%);
       text-decoration: none;
 
-            &:after {
+      &::after {
+        content: "";
         display: block;
         position: absolute;
         right: 5px;
         bottom: 0;
         left: 5px;
         height: calc(50% - 2px/2);
+        transform: rotate(-4deg);
+        transition: border-color .1s;
         border-top: 2px solid rgba($tracker-default-text, .95);
-                content: "";
-                @include rotate(-4deg);
-                @include transition(border-color .1s);
       }
 
-            &:hover:after {
+      &:hover::after {
         border-top-color: rgba($tracker-default-text, .25);
       }
     }
@@ -332,9 +389,9 @@ tr.entry {
     display: block;
     padding: $tracker-list-padding;
 
-        &:before {
-            color: mix($tracker-default-text, $tracker-default-bg, 50%);
+    &::before {
       content: "#";
+      color: mix($tracker-default-text, $tracker-default-bg, 50%);
     }
   }
 
@@ -357,22 +414,9 @@ tr.entry {
   }
 }
 
-@if $table-list-color-odd-rows {
-    .odd {
-        background-color: $table-bg-accent;
-    }
-}
 
-@if $table-list-color-even-rows {
-    .even {
-        background-color: $table-bg-accent;
-    }
-}
-
-
-/**
- * List groups
- */
+//== List groups
+//
 
 tr.group {
   > td {
@@ -413,9 +457,8 @@ tr.group {
 }
 
 
-/**
- * Time entry in report
- */
+//== Time entry in report
+//
 
 tr.time-entry {
   text-align: center;
@@ -468,9 +511,8 @@ tr.time-entry {
   }
 }
 
-/**
- * Wiki page history entry
- */
+//== Wiki page history entry
+//
 
 tr.wiki-page-version {
   td.updated_on,
@@ -479,9 +521,8 @@ tr.wiki-page-version {
   }
 }
 
-/**
- * Project versions list
- */
+//== Project versions list
+//
 
 tr.version {
   &.closed {
@@ -503,9 +544,8 @@ tr.version {
 }
 
 
-/**
- * Users list
- */
+//== Users list
+//
 
 tr.user {
   td {
@@ -533,9 +573,8 @@ tr.user {
 }
 
 
-/**
- * Plugins list
- */
+//== Plugins list
+//
 
 table.plugins {
   .configure {
@@ -555,9 +594,8 @@ table.plugins {
 }
 
 
-/**
- * Files list
- */
+//== Files list
+//
 
 table.files {
   tbody th {
@@ -576,9 +614,9 @@ table.files {
   }
 }
 
-/**
- * Admin lists
- */
+
+//== Admin lists
+//
 
 .controller-enumerations {
   td.name {
@@ -591,3 +629,33 @@ table.files {
     text-align: center;
   }
 }
+
+table.list.enumerations {
+  table-layout: fixed;
+
+  + h3 {
+    margin-top: $line-height-computed * 2;
+  }
+
+  + p {
+    margin-bottom: $line-height-computed * 2;
+  }
+}
+
+
+//== Totals
+//
+
+.query-totals {
+  > span {
+    margin-right: $padding-base-horizontal;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .value {
+    font-weight: $font-weight-bold;
+  }
+}

src/sass/components/_login.scss

@@ -2,46 +2,86 @@
 // Login form
 // --------------------------------------------------
 
-$login-form-width:              350px;
-$login-input-width:             200px;
-
 #login-form {
+  box-sizing: border-box;
   margin: $line-height-computed * 2 auto;
 
+  label,
+  input:not([type="checkbox"]) {
+    width: 100%;
+  }
+
+  label {
+    display: block;
+    margin-bottom: $padding-base-vertical;
+    font-weight: $font-weight-bold;
+
+    &[for="autologin"] {
+      @include check;
+      margin-bottom: $line-height-computed;
+    }
+
+    > a {
+      float: right;
+      font-weight: $font-weight-normal;
+    }
+  }
+
+  input[type="text"],
+  input[type="password"] {
+    margin-bottom: $panel-body-padding-vertical;
+  }
+
   table {
     margin: auto;
+    table-layout: fixed;
   }
 
-    @media screen and (min-width: $screen-sm-min) {
-        width: $login-form-width;
+  td {
+    padding: 0;
 
-        padding: $panel-body-padding;
+    &:first-child {
+      width: $login-form-label-width;
+      padding-right: $table-cell-padding;
+      white-space: nowrap;
+    }
+
+    > label {
+      margin-bottom: $panel-body-padding-vertical;
+    }
+
+    > input[type="submit"] {
+      width: auto;
+      margin-right: 0;
+    }
+  }
+
+  @media screen and (min-width: $login-form-box-breakpoint) {
+    width: $login-form-width;
+    padding: $padding-side;
     border: 1px solid $panel-border;
     border-radius: $border-radius-base;
     background-color: $panel-bg;
-        color: $panel-color;
     box-shadow: $panel-shadow;
+    color: $panel-color;
 
     table {
       width: 100%;
     }
-
-        td {
-            width: 90%; // make columns expand
-            padding: $table-cell-padding;
-        }
-    }
   }
 
-#username,
-#password,
-#openid_url {
-    width: $login-input-width;
+  @each $adjustment, $languages in $login-form-adjustments-map {
+    @each $language in $languages {
+      html[lang="#{$language}"] & td:first-child {
+        width: $login-form-label-width + $adjustment * 1em;
+      }
+    }
+  }
 }
 
 #openid_url {
-    padding-right: 8px + 24px;
+  padding-right: $input-padding-horizontal + 24px;
   background-image: url("../../../images/openid-bg.gif");
   background-repeat: no-repeat;
-    background-position: ($login-input-width - 24px) center;
+  background-position: right $input-padding-horizontal center;
 }

src/sass/components/_pagination.scss

@@ -2,9 +2,23 @@
 // Pagination (multiple pages)
 // --------------------------------------------------
 .pagination {
-    .previous,
-    .next,
-    .page {
+  .pages {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    display: inline-block;
+    margin-right: .3em;
+    list-style: none;
+  }
+
+  li > a,
+  li > span,
+  > .previous,
+  > .next,
+  > .page {
     display: inline-block;
     padding: $pagination-padding-vertical $pagination-padding-horizontal;
     border: 1px solid $pagination-border;
@@ -12,7 +26,24 @@
     background-color: $pagination-bg;
     color: $pagination-color;
     text-decoration: none;
+    white-space: nowrap;
+  }
 
+  li > span {
+    border-color: $pagination-inactive-border;
+    background-color: $pagination-inactive-bg;
+    color: $pagination-inactive-color;
+    cursor: default;
+  }
+
+  .spacer > span {
+    padding: 0;
+    border: 0 none;
+    background: transparent;
+    color: $text-color;
+  }
+
+  a {
     &:hover,
     &:focus {
       border-color: $pagination-hover-border;
@@ -21,12 +52,13 @@
     }
   }
 
-    .page.current {
+  .page.current,
+  .current > span {
+    z-index: 2;
     border-color: $pagination-active-border;
     background-color: $pagination-active-bg;
     color: $pagination-active-color;
     cursor: default;
-        z-index: 2;
   }
 
   .items,
@@ -39,4 +71,13 @@
 p.pagination {
   margin-bottom: 0;
   float: left;
+
+  + h1,
+  + h2,
+  + h3,
+  + h4,
+  + h5,
+  + h6 {
+    clear: both;
+  }
 }

src/sass/components/_plugins.scss

@@ -30,24 +30,86 @@
     }
   }
 
+  .flyout-menu & {
+    a {
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+
   .burndown_chart {
     max-width: $sidebar-width-computed;
   }
 }
 
 
+//
+// Redmine Hearts
+// https://github.com/cat-in-136/redmine_hearts
+// --------------------------------------------------
+
+.journal > div + .contextual {
+  border: 0;
+
+  > .heart-link-with-count {
+    display: block;
+    position: relative;
+    margin: -($line-height-computed / 2 + 1px) ($bubble-padding-horizontal - $padding-small-vertical) 0;
+    float: right;
+    border: 0;
+    background-color: $body-bg;
+    text-align: right;
+  }
+}
+
+@if $use-font-awesome {
+  .icon.icon-heart,
+  .icon.icon-heart-off {
+    background-image: none;
+  }
+
+  .heart-link-with-count {
+    margin-right: $padding-small-vertical;
+    margin-left: $padding-small-vertical;
+
+    > .heart-count-number {
+      display: inline-block;
+      min-width: 1em;
+      margin: 0 0 0 3px;
+      padding: 1px 4px;
+      border-radius: $border-radius-base;
+      background-color: $btn-default-bg;
+      color: $btn-default-color;
+      text-align: center;
+
+      &::before {
+        content: "";
+      }
+    }
+  }
+}
+
+
 //
 // Redmine Time Tracker
 // https://github.com/fernandokosh/redmine_time_tracker
 // --------------------------------------------------
 
 @if $use-font-awesome {
-    .icon.icon-start,
-    .icon.icon-stop {
+  .tt_list_button {
+    @extend %fa-icon;
+    font-size: $fa-font-size-base;
+  }
+
+  .icon,
+  .tt_list_button {
+    &.icon-start,
+    &.icon-stop {
       background-image: none;
     }
 
-    .icon.icon-start {
+    &.icon-start {
       color: $icon-success-color;
 
       &:hover,
@@ -55,12 +117,12 @@
         color: $icon-success-color;
       }
 
-        &:before {
+      &::before {
         content: $fa-var-clock-o;
       }
     }
 
-    .icon.icon-stop {
+    &.icon-stop {
       color: $icon-danger-color;
 
       &:hover,
@@ -68,14 +130,155 @@
         color: $icon-danger-color;
       }
 
-        &:before {
+      &::before {
         content: $fa-var-history;
       }
     }
+  }
 
   .time-tracker-quick-menu:empty {
     display: none;
   }
+
+  #user-time-bookings-list {
+    clear: both;
+  }
+}
+
+
+//
+// Redmine Agile
+// https://www.redmineup.com/pages/plugins/agile
+// --------------------------------------------------
+
+.controller-agile_charts #main {
+  @if $flexbox-layout {
+    flex-wrap: wrap;
+
+    > #footer {
+      flex: 1 0 auto;
+      order: 3;
+    }
+  }
+
+  // Page layout on Agile charts is broken, and with "Go to top" link
+  // from https://github.com/alphanodes/additionals plugin enabled
+  // the chart expands and resize event is triggered indefinitely.
+  // Hiding the "Go to top" link fixes this issue.
+  .gototop {
+    display: none;
+  }
+}
+
+
+//
+// Redmine Tags
+// https://www.redmineup.com/pages/plugins/tags
+// --------------------------------------------------
+
+.select2 {
+  .filter .values & {
+    min-width: 180px;
+    margin: 0;
+  }
+
+  &.select2-container.select2-container--default {
+    .select2-selection--multiple {
+      line-height: $line-height-base;
+
+      .select2-selection__rendered {
+        padding: 0 3px 3px;
+      }
+
+      .select2-selection__choice {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+
+      .select2-search--inline {
+        input {
+          height: auto;
+          padding-top: 0;
+          padding-bottom: 0;
+          line-height: inherit;
+        }
+      }
+    }
+
+    .select2-selection {
+      transition: border-color 50ms ease-in-out,
+                  box-shadow 50ms ease-in-out;
+      border-color: $input-border;
+      box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
+    }
+
+    &.select2-container--focus {
+      .select2-selection {
+        border-color: rgba($input-border-focus, $input-border-focus-alpha);
+        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 0 2px rgba($input-border-focus, $input-shadow-focus-alpha);
+      }
+    }
+  }
+}
+
+
+//
+// Redmine custom menu
+// http://rmplus.pro/en/redmine/plugins/custom_menu
+// --------------------------------------------------
+
+#top-menu {
+  .cm-menu-header {
+    > li {
+      margin: 0;
+
+      > a,
+      > .title {
+        line-height: $input-height-base;
+      }
+
+      > .cm-menu-divider {
+        height: 18px;
+        margin: 5px 4px 0 5px;
+        border-top: 0;
+        border-left: 1px solid;
+        opacity: .3;
+      }
+    }
+
+    .drdn-trigger {
+      font-size: $font-size-base;
+    }
+  }
+
+  .dropdown {
+    .dropdown-menu > li a:hover,
+    .dropdown-menu > li a:focus,
+    .dropdown-submenu:hover a,
+    .dropdown-submenu:focus a {
+      background-color: $brand-primary;
+      color: $brand-text;
+    }
+  }
+
+  .rm-icon {
+    &::before {
+      font-size: $fa-font-size-base;
+    }
+  }
+
+  #quick-search {
+    margin: 0;
+
+    form > input {
+      width: $quick-search-width / 2;
+      min-width: $quick-search-width / 2;
+    }
+
+    a {
+      line-height: inherit;
+    }
+  }
 }
 
 
@@ -176,8 +379,8 @@
       td a {
         display: block;
         max-width: floor($sidebar-width / 3);
-                text-overflow: ellipsis;
         overflow: hidden;
+        text-overflow: ellipsis;
 
         &:hover {
           position: absolute;
@@ -225,3 +428,121 @@
     white-space: nowrap;
   }
 }
+
+
+//
+// Redmine Stuff To Do
+// https://github.com/raafael911/stuff_to_do_plugin
+// --------------------------------------------------
+
+#stuff-to-do {
+  p {
+    @if $sidebar-position == "left" {
+      margin-right: -($sidebar-padding-horizontal);
+    } @else {
+      margin-left: -($sidebar-padding-horizontal);
+    }
+
+    > a {
+      display: block;
+      padding: $sidebar-padding-vertical $sidebar-padding-horizontal;
+
+      @if $sidebar-position == "left" {
+        border-radius: $border-radius-large 0 0 $border-radius-large;
+      } @else {
+        border-radius: 0 $border-radius-large $border-radius-large 0;
+      }
+
+      &:hover {
+        background-color: $sidebar-link-hover-bg;
+        text-decoration: none;
+      }
+    }
+
+    > br {
+      display: none;
+    }
+  }
+}
+
+// Note: the following applies to the latest version
+// of Stuff To Do plugin from the master branch.
+
+.controller-stuff_to_do {
+  .menu {
+    label,
+    select {
+      margin-bottom: 5px;
+    }
+  }
+
+  .stuff-to-do-item {
+    padding: $table-cell-padding;
+    border: 1px solid $table-border-color;
+    border-width: $table-list-item-border;
+    background-color: $body-bg;
+  }
+
+  .pane {
+    ol {
+      padding: 0;
+    }
+
+    .issue-details {
+      width: 80%;
+      margin: 0;
+
+      @if $use-font-awesome {
+        a {
+          img {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .progress {
+      width: 20%;
+      margin: 0;
+    }
+
+    .estimate {
+      top: $table-cell-padding - 1px;
+      right: $table-cell-padding;
+      left: auto;
+      width: 20%;
+      font-size: $font-size-small;
+      text-align: right;
+    }
+  }
+}
+
+
+//
+// Redmine WikiNG
+// https://github.com/martin-denizet/wiking
+// --------------------------------------------------
+
+div.wiking {
+  &.flash {
+    @if $use-font-awesome {
+      &.warning,
+      &.notice,
+      &.tip {
+        background-image: none;
+      }
+
+      &.tip {
+        &::before {
+          content: $fa-var-lightbulb-o;
+        }
+      }
+    } @else {
+      &.warning,
+      &.notice,
+      &.tip {
+        background-position: $padding-large-horizontal 50%;
+      }
+    }
+  }
+}

src/sass/components/_print.scss

@@ -15,28 +15,65 @@
     display: none;
   }
 
+  .pagination {
+    .pages,
+    .per-page {
+      display: none;
+    }
+  }
+
   #main {
+    display: block;
+    overflow: visible !important; // scss-lint:disable ImportantRule
     background: #fff;
   }
 
   #content {
-        // scss-lint:disable ImportantRule
     width: 100%;
     margin: 0;
     padding: 0;
+    overflow: visible !important; // scss-lint:disable ImportantRule
     border: 0;
     background: #fff;
-        overflow: visible !important;
   }
 
   .autoscroll {
     overflow-x: visible;
   }
 
+  a {
+    // scss-lint:disable ImportantRule
+    padding: 0 !important;
+    background-color: transparent !important;
+    color: #000 !important;
+
+    &::before,
+    &::after {
+      display: none !important;
+    }
+
+    &.issue.closed {
+      text-decoration: line-through;
+    }
+  }
+
   table.list {
+    tr {
+      background-color: transparent;
+    }
+
     th,
     td {
       border: 1px solid #aaa;
+      background-color: transparent;
+
+      &.buttons {
+        padding: 0;
+
+        a {
+          display: none;
+        }
+      }
     }
   }
 }

src/sass/components/_progress.scss

@@ -3,11 +3,16 @@
 // --------------------------------------------------
 
 table.progress {
+  width: 80px;
   margin-top: 1px;
   margin-right: 5px;
   float: left;
-    border: 1px solid rgba(#000, .1);
   empty-cells: show;
+  border: 1px solid rgba(#000, .1);
+
+  .version-overview & {
+    width: 40em;
+  }
 
   td.done_ratio & {
     margin-right: auto;

src/sass/components/_responsive.scss

@@ -0,0 +1,265 @@
+// scss-lint:disable SelectorDepth
+.theme-Purplemine2 {
+  @media screen and (max-width: $redmine-responsive-max) {
+    .flyout-menu + div {
+      #header {
+        height: $responsive-header-height;
+        background-color: $header-bg;
+
+        .jump-box-arrow {
+          &::before {
+            line-height: $responsive-header-height;
+          }
+        }
+
+        #quick-search {
+          select {
+            top: 0;
+            height: $responsive-header-height;
+            box-shadow: none;
+          }
+        }
+      }
+
+      #main {
+        padding-top: $responsive-header-height;
+      }
+    }
+
+    #header {
+      #project-jump {
+        padding: 0 $responsive-header-height 0 0;
+
+        .drdn-trigger {
+          display: block;
+          height: $responsive-header-height;
+          padding: 0 0 0 ($padding-base-horizontal + 30px);
+          background-color: transparent;
+          box-shadow: none;
+          line-height: $responsive-header-height;
+
+          &::before {
+            padding-left: $padding-base-horizontal;
+            font-size: 1.2em;
+            font-weight: normal;
+            line-height: $responsive-header-height * .9;
+          }
+
+          @if $use-font-awesome {
+            &::after {
+              display: none;
+            }
+          }
+        }
+
+        .drdn-content {
+          top: $responsive-header-height;
+        }
+      }
+    }
+
+    .mobile-toggle-button {
+      width: $responsive-header-height;
+      height: $responsive-header-height;
+      line-height: $responsive-header-height;
+
+      &:focus {
+        text-decoration: none;
+      }
+    }
+
+    .flyout-menu {
+      background-color: $flyout-menu-bg;
+      color: $flyout-menu-text;
+
+      &__search {
+        height: $responsive-header-height;
+        padding: ($padding-side / 2);
+        line-height: normal;
+
+        input[type="text"] {
+          height: $responsive-header-height - $padding-side;
+          line-height: $responsive-header-height - $padding-side;
+        }
+      }
+
+      a {
+        &,
+        &:hover,
+        &:focus {
+          color: $flyout-menu-link;
+        }
+      }
+
+      h3 {
+        border-top: 1px solid $flyout-menu-header-border;
+        border-bottom: 1px solid $flyout-menu-header-border;
+        background-color: $flyout-menu-header-bg;
+        color: $flyout-menu-header-text;
+      }
+
+      #admin-menu {
+        a {
+          background-position: 8px center;
+
+          @if $use-font-awesome {
+            &,
+            &:hover,
+            &:focus {
+              &::before {
+                color: $flyout-menu-link;
+              }
+            }
+          }
+
+          &.selected {
+            background-color: $body-bg;
+            color: $text-color;
+
+            @if $use-font-awesome {
+              &::before {
+                color: $text-color;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    #query_form_content {
+      fieldset {
+        margin-bottom: $line-height-computed;
+      }
+    }
+
+    .search-magnifier {
+      &--flyout {
+        line-height: normal;
+      }
+    }
+
+    .splitcontentleft {
+      margin-bottom: $line-height-computed;
+      padding-right: 0;
+      float: none;
+    }
+
+    .splitcontentright {
+      padding-left: 0;
+      float: none;
+    }
+
+    .attributes .splitcontentleft {
+      margin-bottom: 0;
+    }
+
+    .tabular {
+      input[type="checkbox"],
+      input[type="radio"],
+      input.date {
+        width: auto;
+        max-width: 95%;
+      }
+
+      label {
+        float: none;
+      }
+    }
+
+    .pagination {
+      .pages {
+        display: block;
+      }
+    }
+
+    p.buttons,
+    .other-formats > span,
+    #wiki_add_attachment > p,
+    #content > .contextual {
+      margin-bottom: $line-height-computed - $padding-small-horizontal;
+      padding: 0;
+      float: none;
+      text-align: left;
+
+      a {
+        display: inline-block;
+        margin: 0 $padding-small-vertical $padding-small-horizontal 0;
+        padding: ($btn-padding-vertical * 2) $btn-padding-horizontal;
+        border: 1px solid $pagination-border;
+        border-radius: $border-radius-base;
+        background-color: $pagination-bg;
+        background-position: $btn-padding-horizontal center;
+        font-weight: $btn-font-weight;
+
+        &:active,
+        &:hover,
+        &:focus {
+          border-color: $pagination-hover-border;
+          background-color: $pagination-hover-bg;
+          text-decoration: none;
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        &.icon {
+          padding-left: 20px + $btn-padding-horizontal;
+        }
+
+        @if $use-font-awesome == false {
+          &.atom {
+            padding-left: 20px + $btn-padding-horizontal;
+          }
+        }
+      }
+    }
+
+    // For Redmine 4.0+
+    #content > .contextual .drdn {
+      padding: 0;
+      border: 0;
+
+      .drdn-trigger {
+        padding: ($btn-padding-vertical * 2) $btn-padding-horizontal;
+        border: 1px solid $pagination-border;
+        border-radius: $border-radius-base;
+        background-color: $pagination-bg;
+
+        &:active,
+        &:hover,
+        &:focus {
+          border-color: $pagination-hover-border;
+          background-color: $pagination-hover-bg;
+          text-decoration: none;
+        }
+      }
+
+      .drdn-items {
+        a {
+          display: block;
+          margin: 3px 0 0;
+
+          &:first-child {
+            margin-top: 0;
+          }
+        }
+      }
+    }
+
+    // For Redmine 3.4+
+    #my-page {
+      #list-left {
+        width: 100%;
+        padding-right: 0;
+        float: none;
+      }
+
+      #list-right {
+        width: 100%;
+        padding-left: 0;
+        float: none;
+      }
+    }
+  }
+}

src/sass/components/_rouge.scss

@@ -0,0 +1,380 @@
+//
+// Syntax highlight - Rouge
+// --------------------------------------------------
+
+.syntaxhl {
+  background: #fafafa;
+
+  .hll {
+    background-color: #ffc;
+  }
+
+  // Comment
+  .c {
+    color: #888;
+  }
+
+  // Error
+  .err {
+    background-color: #faa;
+    color: #f00;
+  }
+
+  // Keyword
+  .k {
+    color: #080;
+    font-weight: bold;
+  }
+
+  // Operator
+  .o {
+    color: #333;
+  }
+
+  // Comment.Hashbang
+  .ch {
+    color: #888;
+  }
+
+  // Comment.Multiline
+  .cm {
+    color: #888;
+  }
+
+  // Comment.Preproc
+  .cp {
+    color: #579;
+  }
+
+  // Comment.PreprocFile
+  .cpf {
+    color: #888;
+  }
+
+  // Comment.Single
+  .c1 {
+    color: #888;
+  }
+
+  // Comment.Special
+  .cs {
+    color: #c00;
+    font-weight: bold;
+  }
+
+  // Generic.Deleted
+  .gd {
+    color: #a00000;
+  }
+
+  // Generic.Emph
+  .ge {
+    font-style: italic;
+  }
+
+  // Generic.Error
+  .gr {
+    color: #f00;
+  }
+
+  // Generic.Heading
+  .gh {
+    color: #000080;
+    font-weight: bold;
+  }
+
+  // Generic.Inserted
+  .gi {
+    color: #00a000;
+  }
+
+  // Generic.Output
+  .go {
+    color: #888;
+  }
+
+  // Generic.Prompt
+  .gp {
+    color: #c65d09;
+    font-weight: bold;
+  }
+
+  // Generic.Strong
+  .gs {
+    font-weight: bold;
+  }
+
+  // Generic.Subheading
+  .gu {
+    color: #800080;
+    font-weight: bold;
+  }
+
+  // Generic.Traceback
+  .gt {
+    color: #04d;
+  }
+
+  // Keyword.Constant
+  .kc {
+    color: #080;
+    font-weight: bold;
+  }
+
+  // Keyword.Declaration
+  .kd {
+    color: #080;
+    font-weight: bold;
+  }
+
+  // Keyword.Namespace
+  .kn {
+    color: #080;
+    font-weight: bold;
+  }
+
+  // Keyword.Pseudo
+  .kp {
+    color: #038;
+    font-weight: bold;
+  }
+
+  // Keyword.Reserved
+  .kr {
+    color: #080;
+    font-weight: bold;
+  }
+
+  // Keyword.Type
+  .kt {
+    color: #339;
+    font-weight: bold;
+  }
+
+  // Literal.Number
+  .m {
+    color: #60e;
+    font-weight: bold;
+  }
+
+  // Literal.String
+  .s {
+    background-color: #fff0f0;
+  }
+
+  // Name.Attribute
+  .na {
+    color: #00c;
+  }
+
+  // Name.Builtin
+  .nb {
+    color: #007020;
+  }
+
+  // Name.Class
+  .nc {
+    color: #b06;
+    font-weight: bold;
+  }
+
+  // Name.Constant
+  .no {
+    color: #036;
+    font-weight: bold;
+  }
+
+  // Name.Decorator
+  .nd {
+    color: #555;
+    font-weight: bold;
+  }
+
+  // Name.Entity
+  .ni {
+    color: #800;
+    font-weight: bold;
+  }
+
+  // Name.Exception
+  .ne {
+    color: #f00;
+    font-weight: bold;
+  }
+
+  // Name.Function
+  .nf {
+    color: #06b;
+    font-weight: bold;
+  }
+
+  // Name.Label
+  .nl {
+    color: #970;
+    font-weight: bold;
+  }
+
+  // Name.Namespace
+  .nn {
+    color: #0e84b5;
+    font-weight: bold;
+  }
+
+  // Name.Tag
+  .nt {
+    color: #070;
+  }
+
+  // Name.Variable
+  .nv {
+    color: #963;
+  }
+
+  // Operator.Word
+  .ow {
+    color: #000;
+    font-weight: bold;
+  }
+
+  // Text.Whitespace
+  .w {
+    color: #bbb;
+  }
+
+  // Literal.Number.Bin
+  .mb {
+    color: #60e;
+    font-weight: bold;
+  }
+
+  // Literal.Number.Float
+  .mf {
+    color: #60e;
+    font-weight: bold;
+  }
+
+  // Literal.Number.Hex
+  .mh {
+    color: #058;
+    font-weight: bold;
+  }
+
+  // Literal.Number.Integer
+  .mi {
+    color: #00d;
+    font-weight: bold;
+  }
+
+  // Literal.Number.Oct
+  .mo {
+    color: #40e;
+    font-weight: bold;
+  }
+
+  // Literal.String.Affix
+  .sa {
+    background-color: #fff0f0;
+  }
+
+  // Literal.String.Backtick
+  .sb {
+    background-color: #fff0f0;
+  }
+
+  // Literal.String.Char
+  .sc {
+    color: #04d;
+  }
+
+  // Literal.String.Delimiter
+  .dl {
+    background-color: #fff0f0;
+  }
+
+  // Literal.String.Doc
+  .sd {
+    color: #d42;
+  }
+
+  // Literal.String.Double
+  .s2 {
+    background-color: #fff0f0;
+  }
+
+  // Literal.String.Escape
+  .se {
+    background-color: #fff0f0;
+    color: #666;
+    font-weight: bold;
+  }
+
+  // Literal.String.Heredoc
+  .sh {
+    background-color: #fff0f0;
+  }
+
+  // Literal.String.Interpol
+  .si {
+    background-color: #eee;
+  }
+
+  // Literal.String.Other
+  .sx {
+    background-color: #fff0f0;
+    color: #d20;
+  }
+
+  // Literal.String.Regex
+  .sr {
+    background-color: #fff0ff;
+    color: #000;
+  }
+
+  // Literal.String.Single
+  .s1 {
+    background-color: #fff0f0;
+  }
+
+  // Literal.String.Symbol
+  .ss {
+    color: #a60;
+  }
+
+  // Name.Builtin.Pseudo
+  .bp {
+    color: #007020;
+  }
+
+  // Name.Function.Magic
+  .fm {
+    color: #06b;
+    font-weight: bold;
+  }
+
+  // Name.Variable.Class
+  .vc {
+    color: #369;
+  }
+
+  // Name.Variable.Global
+  .vg {
+    color: #d70;
+    font-weight: bold;
+  }
+
+  // Name.Variable.Instance
+  .vi {
+    color: #33b;
+  }
+
+  // Name.Variable.Magic
+  .vm {
+    color: #963;
+  }
+
+  // Literal.Number.Integer.Long
+  .il {
+    color: #00d;
+    font-weight: bold;
+  }
+}

src/sass/components/_simple-list.scss

@@ -20,7 +20,7 @@
     background-position: 0 center;
   }
 
-    span.project:after {
+  span.project::after {
     content: " -";
   }
 
@@ -64,6 +64,7 @@
 
     @if $use-gravatars {
       .gravatar {
+        top: 0;
         margin-top: -2px;
         margin-right: $activity-avatar-space;
         float: left;
@@ -72,8 +73,8 @@
   }
 
   dd {
-        font-size: $font-size-small;
     overflow: hidden;
+    font-size: $font-size-small;
 
     &.grouped {
       margin-left: $activity-indent;
@@ -99,15 +100,15 @@
 // Search form
 
 #search-form {
+  margin-bottom: $line-height-computed;
+
   input,
   select {
     margin-right: 5px;
   }
 
   label {
-        display: inline-block;
-        margin-right: 5px;
-        @include checkbox;
+    @include check-inline;
   }
 
   p:last-child {

src/sass/components/_tabs.scss

@@ -2,11 +2,12 @@
 // Tabs
 // --------------------------------------------------
 
+$tabs-height: $line-height-computed + $tab-padding-vertical * 2 + 1px + 1px;
+
 .tabs {
   $tabs-buttons-width: 40px;
 
   position: relative;
-    margin-bottom: $line-height-computed;
   overflow: hidden;
 
   @if not $flexbox-layout {
@@ -14,31 +15,22 @@
   }
 
   > ul {
-        // scss-lint:disable VendorPrefix
+    box-sizing: border-box;
     margin: 0;
     padding-left: 0;
-        border-bottom: 1px solid $tab-border;
     list-style: none;
 
     @if $flexbox-layout {
-            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: $tabs-height;
     } @else {
       width: 2000px;
       @extend %clearfix;
     }
 
     > li {
-            margin-bottom: -1px;
-
       @if $flexbox-layout {
-                -webkit-flex: 0 1 auto;
-                -ms-flex: 0 1 auto;
         flex: 0 1 auto;
       } @else {
         float: left;
@@ -46,26 +38,15 @@
 
       > a {
         display: block;
-                min-width: 2em;
+        box-sizing: border-box;
+        min-width: 3em;
+        height: $tabs-height;
         margin-right: 2px;
         padding: $tab-padding-vertical $tab-padding-horizontal;
         border: 1px solid transparent;
         border-radius: $border-radius-base $border-radius-base 0 0;
         text-align: center;
         white-space: nowrap;
-
-                &:hover,
-                &:focus {
-                    border-color: $tab-hover-border $tab-hover-border $tab-border;
-                    background-color: $tab-hover-bg;
-                    text-decoration: none;
-                }
-
-                &.selected {
-                    border-color: $tab-active-border $tab-active-border $tab-active-bg;
-                    background: $tab-active-bg;
-                    color: $tab-active-text;
-                }
       }
     }
   }
@@ -75,23 +56,23 @@
     top: 0;
     right: 0;
     width: $tabs-buttons-width;
-        padding-left: 5px;
     border-bottom: 1px solid $tab-border;
     background-color: $body-bg;
 
     > button {
       width: 50%;
-            height: $tab-padding-vertical * 2 + $line-height-computed + 1px;
+      height: $tabs-height - 1px;
       margin: 0;
       padding: 0;
       float: left;
+      transition: opacity .1s;
       border: 0 none;
+      border-radius: 0;
+      opacity: .8;
       background-color: $body-bg;
       background-repeat: no-repeat;
       background-position: center center;
       box-shadow: none;
-            opacity: .8;
-            @include transition(opacity .1s);
 
       &:hover,
       &:active {
@@ -101,6 +82,10 @@
       &:active {
         background-color: $tab-hover-bg;
       }
+
+      &.disabled {
+        opacity: .4;
+      }
     }
 
     .tab-left {
@@ -113,9 +98,46 @@
   }
 }
 
-/**
- * Specific tabs content layout
- */
+div.tabs:not(#main-menu) {
+  height: $tabs-height;
+  margin-bottom: $line-height-computed;
+
+  > ul {
+    margin: 0;
+    padding: 0;
+    border-bottom: 1px solid $tab-border;
+
+    > li {
+      margin: 0 0 -1px;
+      background: transparent;
+
+      > a {
+        padding: $tab-padding-vertical $tab-padding-horizontal;
+        border-color: transparent;
+        background: transparent;
+        color: $link-color;
+        font: inherit;
+
+        &:hover,
+        &:focus {
+          border-color: $tab-hover-border $tab-hover-border $tab-border;
+          background-color: $tab-hover-bg;
+          color: $link-hover-color;
+          text-decoration: none;
+        }
+
+        &.selected {
+          border-color: $tab-active-border $tab-active-border $tab-active-bg;
+          background: $tab-active-bg;
+          color: $tab-active-text;
+        }
+      }
+    }
+  }
+}
+
+//== Specific tabs content layout
+//
 
 #tab-content-modules fieldset p {
   margin: 3px 0 4px;
@@ -140,9 +162,9 @@
     }
 
     label {
+      @include check;
       display: block;
       margin-bottom: 3px;
-            @include checkbox;
     }
 
     label[for=principal_search] {
@@ -166,3 +188,9 @@
 #tab-content-memberships .splitcontentright select {
   width: 100%;
 }
+
+#principals_for_new_member {
+  .pagination {
+    float: none;
+  }
+}

src/sass/components/_top.scss

@@ -3,12 +3,12 @@
 // --------------------------------------------------
 
 #top-menu {
+  @extend %clearfix;
   position: relative;
   padding: $padding-small-vertical $padding-side;
   background: $top-menu-bg;
   color: $top-menu-text;
   font-size: $font-size-small;
-    @extend %clearfix;
 
   @if $top-menu-collapse {
     $toggler-position-v:    $padding-small-vertical + 1px;
@@ -37,24 +37,16 @@
       } @else {
         right: $toggler-position-h;
       }
-            @include user-select(none);
-
-            @if $use-font-awesome {
-                font-size: 14px;
-
-                &:before {
-                    content: $fa-var-caret-square-o-down;
-                }
-            } @else {
-                @extend %image-arrow-down-white;
-            }
+      user-select: none;
 
       @if $use-font-awesome {
         @extend %fa-icon;
         color: mix($top-menu-link, $top-menu-bg, 33%);
+        font-size: $fa-font-size-base;
         line-height: 1;
 
-                &:before {
+        &::before {
+          content: $fa-var-caret-square-o-down;
           margin-right: 0;
         }
 
@@ -64,6 +56,7 @@
           color: mix($top-menu-link-hover, $top-menu-bg, 50%);
         }
       } @else {
+        @extend %image-arrow-down-white;
         width: 15px;
         height: 15px;
         border-radius: $border-radius-base;
@@ -79,7 +72,7 @@
 
       &.expanded {
         @if $use-font-awesome {
-                    &:before {
+          &::before {
             content: $fa-var-caret-square-o-up;
           }
         } @else {
@@ -94,15 +87,17 @@
   }
 
   ul {
+    @include clearfix;
     margin: 0;
     padding: 0;
   }
 
   li {
-        display: inline;
     margin: 0 .5em 0 0;
     padding: 0;
+    float: left;
     list-style-type: none;
+    white-space: nowrap;
   }
 
   a {
@@ -136,10 +131,10 @@
 // --------------------------------------------------
 
 #header {
+  @extend %clearfix;
   position: relative;
   background-color: $header-bg;
   color: $header-text;
-    @extend %clearfix;
 
   > h1 {
     padding: $header-padding-vertical $header-padding-horizontal;
@@ -155,14 +150,23 @@
       }
     }
 
-        > .root {
+    .root {
       color: $header-root;
       font-weight: 500;
     }
 
-        > .ancestor {
+    .ancestor {
       font-weight: 500;
     }
+
+    .root,
+    .ancestor {
+      display: inline-block;
+    }
+
+    .current-project {
+      display: inline-block;
+    }
   }
 
   a {
@@ -171,32 +175,27 @@
 }
 
 #quick-search {
+  #header & {
     margin-top: floor(($header-title-line-height + $header-padding-vertical * 2 - $input-height-base) / 2) - 1px;
     margin-right: $header-padding-horizontal;
     float: right;
     color: $header-text;
-
-    label {
-        font-weight: 500;
   }
 
   form {
-        display: inline;
+    display: inline-block;
+
+    input {
+      width: $quick-search-width;
+    }
   }
 
-    input,
-    select {
-        margin-left: 5px;
-        border-color: darken($header-bg, 15%);
-        background: darken($header-bg, 10%);
-        color: $header-root;
-        @include transition(color ease-in-out .1s, background-color ease-in-out .1s, border-color ease-in-out .1s);
+  > form > input,
+  > select {
+    border-color: $quick-search-border;
 
     &:focus {
-            border-color: darken($header-bg, 35%);
-            background-color: $input-bg;
-            color: $input-color;
-            box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);
+      border-color: $quick-search-border-focus;
     }
   }
 
@@ -208,123 +207,148 @@
       color: $gray-lighter;
     }
   }
-
-    input {
-        width: 200px;
-    }
 }
 
-#main-menu {
-    background-color: $main-menu-bg;
-    box-shadow: inset 0 -1px $main-menu-border;
-
-    @if $main-menu-collapse {
-        $toggler-position-v:    $main-menu-padding-vertical + 3px;
-        $toggler-position-h:    1px;
-
-        position: relative;
-        max-height: $line-height-computed + $main-menu-padding-vertical * 2;
-        overflow: hidden;
+#project-jump {
+  display: inline-block;
 
   &.expanded {
-            max-height: none;
-        }
-
-        .main-menu-toggler {
-            display: block;
-            position: absolute;
-            top: $toggler-position-v;
-            @if $sidebar-position == "left" {
-                left: $toggler-position-h;
-            } @else {
-                right: $toggler-position-h;
-            }
-            @include user-select(none);
+    .drdn-trigger {
+      z-index: 1003;
+      height: auto;
+      padding-bottom: $header-padding-horizontal / 2;
+      border-color: $quick-search-dropdown-bg;
+      background-color: $quick-search-dropdown-bg;
 
       @if $use-font-awesome {
-                font-size: 14px;
-
-                &:before {
-                    content: $fa-var-caret-square-o-down;
-                }
-            } @else {
-                @extend %image-arrow-down;
-            }
-
-            @if $use-font-awesome {
-                @extend %fa-icon;
-                color: mix($main-menu-link, $main-menu-bg, 33%);
-                line-height: 1;
-
-                &:before {
-                    margin-right: 0;
-                }
-
-                &:hover,
-                &:focus,
-                &:active {
-                    color: mix($main-menu-link, $main-menu-bg, 50%);
-                }
-            } @else {
-                width: 15px;
-                height: 15px;
-                border-radius: $border-radius-base;
-                background-repeat: no-repeat;
-                background-position: center center;
-
-                &:hover,
-                &:focus,
-                &:active {
-                    background-color: darken($main-menu-bg, 15%);
-                }
-            }
-
-            &.expanded {
-                @if $use-font-awesome {
-                    &:before {
-                        content: $fa-var-caret-square-o-up;
+        &::after {
+          content: $fa-var-caret-up;
         }
       } @else {
         @extend %image-arrow-up;
       }
     }
-
-            @media screen and (min-width: $main-menu-collapse-breakpoint) {
-                display: none;
   }
+
+  .drdn {
+    &-trigger {
+      @extend %form-field;
+      min-width: $quick-search-width;
+      border-color: $quick-search-border;
+
+      @if $use-font-awesome {
+        @extend %fa-icon-after;
+
+        &::after {
+          content: $fa-var-caret-down;
+          position: absolute;
+          top: ($font-size-base / 2);
+          right: $input-padding-horizontal;
         }
       } @else {
-        @media screen and (max-width: $screen-sm-max) {
-            font-size: $font-size-small-px;
+        @extend %image-arrow-down;
+        background-repeat: no-repeat;
+        background-position: right ($input-padding-horizontal / 2) center;
       }
     }
 
-    ul {
-        margin: 0;
-        padding: 0 ($padding-side - $main-menu-padding-horizontal);
+    &-content {
+      min-width: $quick-search-box-width;
+      background: $quick-search-dropdown-bg;
+
+      > .quick-search {
+        padding: $header-padding-horizontal / 2;
+
+        > input {
+          width: 100%;
+        }
+      }
+    }
+
+    &-items {
+      border-top: 1px solid $quick-search-dropdown-border;
+
+      > a,
+      > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  a {
     color: $main-menu-link;
-        list-style: none;
-        @extend %clearfix;
+
+    &:hover,
+    &:focus {
+      background-color: $component-active-bg;
+      color: $component-active-color;
+      text-decoration: none;
+    }
+  }
+
+  .all-projects a {
+    font-weight: $font-weight-bold;
+  }
+}
+
+#main-menu {
+  $tabs-height: $main-menu-padding-vertical * 2 + $line-height-computed;
+
+  clear: both;
+  background-color: $main-menu-bg;
+  box-shadow: inset 0 -1px $main-menu-border;
+  color: $text-color;
+
+  &.tabs {
+    margin-bottom: 0;
+    overflow: inherit;
+
+    > ul {
+      height: $tabs-height;
 
       > li {
+        > a {
+          height: $tabs-height;
+          border: 0 none;
+          border-radius: 0;
+          background: transparent;
+        }
+      }
+    }
+  }
+
+  > ul {
+    @extend %clearfix;
+    margin: 0;
+    padding: 0 ($padding-side - $main-menu-padding-horizontal);
+    list-style: none;
+    color: $main-menu-link;
+
+    > li {
+      position: relative;
       margin-right: .5em;
       float: left;
 
+      &:hover {
+        > .new-object {
+          z-index: 100;
+          border-bottom: 1px solid $main-menu-dropdown-bg;
+        }
+
+        > .menu-children {
+          display: block;
+        }
+      }
+
       > a {
         display: block;
-                white-space: nowrap;
-                @include transition(box-shadow .2s);
-
-                @if $main-menu-collapse {
         padding: $main-menu-padding-vertical $main-menu-padding-horizontal;
-                } @else {
-                    padding: $main-menu-padding-vertical 0;
-
-                    @media screen and (min-width: $screen-md-min) {
-                        padding-right: $main-menu-padding-horizontal;
-                        padding-left: $main-menu-padding-horizontal;
-                    }
-                }
+        transition: box-shadow .15s;
+        color: $main-menu-link;
+        line-height: $line-height-computed;
+        white-space: nowrap;
 
         @media screen and (min-width: $screen-lg-min) {
           padding-right: $main-menu-padding-horizontal * 2;
@@ -334,22 +358,94 @@
         &:hover,
         &:focus {
           outline: 0 none;
-                    text-decoration: none;
           box-shadow: inset 0 (-$main-menu-shadow-width) 0 $main-menu-shadow-hover;
+          text-decoration: none;
         }
 
         &.selected {
           padding-bottom: $main-menu-padding-vertical - $main-menu-shadow-width;
           border-bottom: 3px solid $main-menu-shadow-active;
+          box-shadow: none;
           color: $main-menu-link-active;
           font-weight: $font-weight-bold;
+        }
+
+        &.new-object {
+          position: relative;
+          min-width: 1.6em;
+          padding-bottom: $main-menu-padding-vertical - 1px;
+          border: 1px solid $main-menu-border;
+          border-width: 0 1px;
+          background-color: $main-menu-dropdown-bg;
+          color: $icon-success-color;
+          font-size: 2em;
+          font-weight: bold;
+          text-align: center;
+
+          &:hover,
+          &:focus {
             box-shadow: none;
           }
         }
       }
     }
+  }
 
   a {
     color: $main-menu-link;
   }
+
+  .menu-children {
+    @include nice-shadow(2);
+    display: none;
+    position: absolute;
+    z-index: 1001;
+    min-width: 130px;
+    margin: 0 1px;
+    padding: 0;
+    overflow: hidden;
+    list-style: none;
+    border-radius: 0 0 $border-radius-base $border-radius-base;
+    background: $main-menu-dropdown-bg;
+
+    &.visible {
+      display: block;
+    }
+
+    a {
+      display: block;
+      padding: $tab-padding-vertical ($tab-padding-horizontal * 2);
+      border-top: 1px solid $main-menu-border;
+      color: $main-menu-link;
+
+      &:hover,
+      &:focus {
+        outline: 0 none;
+        background-color: $component-active-bg;
+        color: $component-active-color;
+        text-decoration: none;
+      }
+    }
+
+    > li:first-child > a {
+      border: 0 none;
+    }
+  }
+
+  .tabs-buttons {
+    display: none !important; // scss-lint:disable ImportantRule
+    padding-left: 0;
+    border-color: $main-menu-border;
+    background-color: $main-menu-bg;
+
+    > button {
+      box-sizing: border-box;
+      height: $tabs-height - 1px;
+      background-color: $main-menu-bg;
+    }
+  }
+
+  ul + .tabs-buttons {
+    display: block !important; // scss-lint:disable ImportantRule
+  }
 }

src/sass/components/_wiki.scss

@@ -3,18 +3,7 @@
   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
-         */
-        a[name]:empty {
-            display: block;
-            overflow: hidden;
-        }
-
-        /**
-         * Add some space between list items
-         */
+    // Add some space between list items
     ul,
     ol {
       li {
@@ -34,9 +23,12 @@
   }
 }
 
-.controller-wiki .wiki > .preview {
+.controller-wiki {
+  .wiki > .preview,
+  .wiki.wiki-preview {
     font-size: $wiki-font-size;
   }
+}
 
 div.wiki {
   color: $wiki-text;
@@ -55,21 +47,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,18 +100,18 @@ div.wiki {
     + h4,
     + h5,
     + h6 {
-            &:before {
+      &::before {
+        content: "#";
         display: inline-block;
         width: .7em;
         margin-left: -.7em;
         color: $headings-anchor-color-active;
         font-weight: normal;
-                content: "#";
       }
     }
   }
 
-    > *:last-child {
+  >:last-child {
     margin-bottom: 0;
   }
 
@@ -120,7 +127,7 @@ div.wiki {
 
   .contextual {
     a {
-            opacity: .4;
+      opacity: .5;
 
       &:hover {
         opacity: 1;
@@ -129,7 +136,6 @@ div.wiki {
   }
 
   a {
-        // scss-lint:disable DuplicateProperty
     word-break: break-all;
     word-break: break-word;
   }
@@ -155,7 +161,6 @@ div.wiki {
   }
 
   table {
-        // scss-lint:disable DuplicateProperty
     display: block;
     width: 100%;
     margin-bottom: $line-height-computed;
@@ -198,12 +203,12 @@ div.wiki {
     width: auto;
     margin-bottom: 1.15em;
     padding: 4px 8px;
+    overflow-x: auto;
+    overflow-y: hidden;
     border: 1px solid #e7e7e7;
     border-radius: $border-radius-base;
     border-color: rgba(#000, .068);
     background-color: rgba(#000, .03);
-        overflow-x: auto;
-        overflow-y: hidden;
     font-size: $font-size-small;
 
     code {
@@ -232,8 +237,8 @@ div.wiki {
       border: 1px solid $highlight-border;
       border-radius: $border-radius-base;
       background-color: $highlight-bg;
-            font-size: $font-size-small;
       box-shadow: $panel-shadow;
+      font-size: $font-size-small;
 
       a {
         color: $highlight-text;
@@ -274,8 +279,8 @@ div.wiki {
       margin: 0;
 
       li {
-                list-style-type: disc;
         margin-left: 1.5em;
+        list-style-type: disc;
 
         li {
           list-style-type: circle;
@@ -310,14 +315,13 @@ h4,
 h5,
 h6 {
   .wiki-anchor {
-        // scss-lint:disable ImportantRule
     display: none;
     position: relative;
     top: -(1em - $font-size-small);
     margin-left: 5px;
-        color: $headings-anchor-color !important;
+    color: $headings-anchor-color !important; // scss-lint:disable ImportantRule
     font-size: $font-size-small;
-        text-decoration: none !important;
+    text-decoration: none !important; // scss-lint:disable ImportantRule
   }
 
   &:hover {
@@ -336,16 +340,16 @@ h6 {
 p.footnote {
   margin-bottom: 5px;
 
-    &:before {
+  &::before {
+    content: "";
     display: block;
     width: 300px;
     margin-top:  $line-height-computed;
     padding-top: $line-height-computed / 2;
     border-top: 1px solid $gray-lighter;
-        content: "";
   }
 
-    + p.footnote:before {
+  + p.footnote::before {
     display: none;
   }
 }
@@ -371,10 +375,19 @@ p.footnote {
     float: left;
   }
 
-    #add_attachment_form {
+  > form {
     padding-top: $line-height-computed;
     clear: left;
   }
+
+  .collapsible & {
+    padding-top: 0;
+    border-top: 0;
+
+    > form {
+      padding-top: 0;
+    }
+  }
 }
 
 
@@ -382,10 +395,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 +430,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 +448,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; }

src/sass/javascripts/_sidebar-toggler.scss

@@ -8,12 +8,12 @@
 
   #sidebar {
     @if $fixed-layout {
-            opacity: 1;
       will-change: margin, opacity;
-            @include transition(margin .5s, opacity .5s);
+      transition: margin .5s, opacity .5s;
+      opacity: 1;
     } @else {
       will-change: margin;
-            @include transition(margin .5s);
+      transition: margin .5s;
     }
 
     &.sidebar-hiding {
@@ -33,18 +33,21 @@
   }
 
   .sidebar-toggler {
-        @include user-select(none);
-
     display: block;
     position: absolute;
     top: $toggler-position-v;
+    user-select: none;
+
+    @media print {
+      display: none;
+    }
 
     @if $use-font-awesome {
       @extend %fa-icon;
       color: $gray-light;
       line-height: 1;
 
-            &:before {
+      &::before {
         margin-right: 0;
       }
 
@@ -71,7 +74,7 @@
       left: $toggler-position-h;
 
       @if $use-font-awesome {
-                &:before {
+        &::before {
           content: $fa-var-caret-square-o-left;
         }
       } @else {
@@ -81,7 +84,7 @@
       right: $toggler-position-h;
 
       @if $use-font-awesome {
-                &:before {
+        &::before {
           content: $fa-var-caret-square-o-right;
         }
       } @else {
@@ -92,7 +95,7 @@
     &.sidebar-hidden {
       @if $sidebar-position == "left" {
         @if $use-font-awesome {
-                    &:before {
+          &::before {
             content: $fa-var-caret-square-o-right;
           }
         } @else {
@@ -100,7 +103,7 @@
         }
       } @else {
         @if $use-font-awesome {
-                    &:before {
+          &::before {
             content: $fa-var-caret-square-o-left;
           }
         } @else {

src/sass/lib/_font-awesome.scss

@@ -1,5 +1,5 @@
 /*!
- *  Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
  */
 

src/sass/lib/font-awesome/_mixins.scss

@@ -1,26 +1,10 @@
 // Mixins
-// scss-lint:disable VendorPrefix
 // --------------------------
 
 @mixin fa-icon() {
   display: inline-block;
   font: normal normal normal 14px/1 FontAwesome; // shortening font declaration
-    font-size: inherit; // can't have font-size inherit on line above, so need to override
   text-rendering: auto; // optimizelegibility throws things off #1094
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-@mixin fa-icon-rotate($degrees, $rotation) {
-    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
-    -webkit-transform: rotate($degrees);
-        -ms-transform: rotate($degrees);
-            transform: rotate($degrees);
-}
-
-@mixin fa-icon-flip($horiz, $vert, $rotation) {
-    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
-    -webkit-transform: scale($horiz, $vert);
-        -ms-transform: scale($horiz, $vert);
-            transform: scale($horiz, $vert);
-}

src/sass/lib/font-awesome/_path.scss

@@ -5,6 +5,7 @@
   font-family: "FontAwesome";
   src: url("#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}");
   src: url("#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}") format("embedded-opentype"),
+    url("#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}") format("woff2"),
     url("#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}") format("woff"),
     url("#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}") format("truetype"),
     url("#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular") format("svg");

src/sass/lib/font-awesome/_variables.scss

@@ -2,19 +2,28 @@
 // --------------------------
 
 $fa-font-path:                  "../fonts" !default;
+$fa-font-size-base:             14px !default;
+$fa-line-height-base:           1 !default;
 $fa-css-prefix:                 fa !default;
-$fa-version:                    "4.2.0" !default;
+$fa-version:                    "4.7.0" !default;
 $fa-border-color:               #eee !default;
 $fa-inverse:                    #fff !default;
 $fa-li-width:                   (30em / 14) !default;
 
+$fa-var-500px:                  "\f26e";
+$fa-var-address-book:           "\f2b9";
+$fa-var-address-book-o:         "\f2ba";
+$fa-var-address-card:           "\f2bb";
+$fa-var-address-card-o:         "\f2bc";
 $fa-var-adjust:                 "\f042";
 $fa-var-adn:                    "\f170";
 $fa-var-align-center:           "\f037";
 $fa-var-align-justify:          "\f039";
 $fa-var-align-left:             "\f036";
 $fa-var-align-right:            "\f038";
+$fa-var-amazon:                 "\f270";
 $fa-var-ambulance:              "\f0f9";
+$fa-var-american-sign-language-interpreting: "\f2a3";
 $fa-var-anchor:                 "\f13d";
 $fa-var-android:                "\f17b";
 $fa-var-angellist:              "\f209";
@@ -45,16 +54,35 @@ $fa-var-arrows:                 "\f047";
 $fa-var-arrows-alt:             "\f0b2";
 $fa-var-arrows-h:               "\f07e";
 $fa-var-arrows-v:               "\f07d";
+$fa-var-asl-interpreting:       "\f2a3";
+$fa-var-assistive-listening-systems: "\f2a2";
 $fa-var-asterisk:               "\f069";
 $fa-var-at:                     "\f1fa";
+$fa-var-audio-description:      "\f29e";
 $fa-var-automobile:             "\f1b9";
 $fa-var-backward:               "\f04a";
+$fa-var-balance-scale:          "\f24e";
 $fa-var-ban:                    "\f05e";
+$fa-var-bandcamp:               "\f2d5";
 $fa-var-bank:                   "\f19c";
 $fa-var-bar-chart:              "\f080";
 $fa-var-bar-chart-o:            "\f080";
 $fa-var-barcode:                "\f02a";
 $fa-var-bars:                   "\f0c9";
+$fa-var-bath:                   "\f2cd";
+$fa-var-bathtub:                "\f2cd";
+$fa-var-battery:                "\f240";
+$fa-var-battery-0:              "\f244";
+$fa-var-battery-1:              "\f243";
+$fa-var-battery-2:              "\f242";
+$fa-var-battery-3:              "\f241";
+$fa-var-battery-4:              "\f240";
+$fa-var-battery-empty:          "\f244";
+$fa-var-battery-full:           "\f240";
+$fa-var-battery-half:           "\f242";
+$fa-var-battery-quarter:        "\f243";
+$fa-var-battery-three-quarters: "\f241";
+$fa-var-bed:                    "\f236";
 $fa-var-beer:                   "\f0fc";
 $fa-var-behance:                "\f1b4";
 $fa-var-behance-square:         "\f1b5";
@@ -68,12 +96,17 @@ $fa-var-birthday-cake:          "\f1fd";
 $fa-var-bitbucket:              "\f171";
 $fa-var-bitbucket-square:       "\f172";
 $fa-var-bitcoin:                "\f15a";
+$fa-var-black-tie:              "\f27e";
+$fa-var-blind:                  "\f29d";
+$fa-var-bluetooth:              "\f293";
+$fa-var-bluetooth-b:            "\f294";
 $fa-var-bold:                   "\f032";
 $fa-var-bolt:                   "\f0e7";
 $fa-var-bomb:                   "\f1e2";
 $fa-var-book:                   "\f02d";
 $fa-var-bookmark:               "\f02e";
 $fa-var-bookmark-o:             "\f097";
+$fa-var-braille:                "\f2a1";
 $fa-var-briefcase:              "\f0b1";
 $fa-var-btc:                    "\f15a";
 $fa-var-bug:                    "\f188";
@@ -82,10 +115,15 @@ $fa-var-building-o:             "\f0f7";
 $fa-var-bullhorn:               "\f0a1";
 $fa-var-bullseye:               "\f140";
 $fa-var-bus:                    "\f207";
+$fa-var-buysellads:             "\f20d";
 $fa-var-cab:                    "\f1ba";
 $fa-var-calculator:             "\f1ec";
 $fa-var-calendar:               "\f073";
+$fa-var-calendar-check-o:       "\f274";
+$fa-var-calendar-minus-o:       "\f272";
 $fa-var-calendar-o:             "\f133";
+$fa-var-calendar-plus-o:        "\f271";
+$fa-var-calendar-times-o:       "\f273";
 $fa-var-camera:                 "\f030";
 $fa-var-camera-retro:           "\f083";
 $fa-var-car:                    "\f1b9";
@@ -97,9 +135,13 @@ $fa-var-caret-square-o-left:    "\f191";
 $fa-var-caret-square-o-right:   "\f152";
 $fa-var-caret-square-o-up:      "\f151";
 $fa-var-caret-up:               "\f0d8";
+$fa-var-cart-arrow-down:        "\f218";
+$fa-var-cart-plus:              "\f217";
 $fa-var-cc:                     "\f20a";
 $fa-var-cc-amex:                "\f1f3";
+$fa-var-cc-diners-club:         "\f24c";
 $fa-var-cc-discover:            "\f1f2";
+$fa-var-cc-jcb:                 "\f24b";
 $fa-var-cc-mastercard:          "\f1f1";
 $fa-var-cc-paypal:              "\f1f4";
 $fa-var-cc-stripe:              "\f1f5";
@@ -121,12 +163,14 @@ $fa-var-chevron-left:           "\f053";
 $fa-var-chevron-right:          "\f054";
 $fa-var-chevron-up:             "\f077";
 $fa-var-child:                  "\f1ae";
+$fa-var-chrome:                 "\f268";
 $fa-var-circle:                 "\f111";
 $fa-var-circle-o:               "\f10c";
 $fa-var-circle-o-notch:         "\f1ce";
 $fa-var-circle-thin:            "\f1db";
 $fa-var-clipboard:              "\f0ea";
 $fa-var-clock-o:                "\f017";
+$fa-var-clone:                  "\f24d";
 $fa-var-close:                  "\f00d";
 $fa-var-cloud:                  "\f0c2";
 $fa-var-cloud-download:         "\f0ed";
@@ -135,19 +179,26 @@ $fa-var-cny:                    "\f157";
 $fa-var-code:                   "\f121";
 $fa-var-code-fork:              "\f126";
 $fa-var-codepen:                "\f1cb";
+$fa-var-codiepie:               "\f284";
 $fa-var-coffee:                 "\f0f4";
 $fa-var-cog:                    "\f013";
 $fa-var-cogs:                   "\f085";
 $fa-var-columns:                "\f0db";
 $fa-var-comment:                "\f075";
 $fa-var-comment-o:              "\f0e5";
+$fa-var-commenting:             "\f27a";
+$fa-var-commenting-o:           "\f27b";
 $fa-var-comments:               "\f086";
 $fa-var-comments-o:             "\f0e6";
 $fa-var-compass:                "\f14e";
 $fa-var-compress:               "\f066";
+$fa-var-connectdevelop:         "\f20e";
+$fa-var-contao:                 "\f26d";
 $fa-var-copy:                   "\f0c5";
 $fa-var-copyright:              "\f1f9";
+$fa-var-creative-commons:       "\f25e";
 $fa-var-credit-card:            "\f09d";
+$fa-var-credit-card-alt:        "\f283";
 $fa-var-crop:                   "\f125";
 $fa-var-crosshairs:             "\f05b";
 $fa-var-css3:                   "\f13c";
@@ -156,27 +207,39 @@ $fa-var-cubes:                  "\f1b3";
 $fa-var-cut:                    "\f0c4";
 $fa-var-cutlery:                "\f0f5";
 $fa-var-dashboard:              "\f0e4";
+$fa-var-dashcube:               "\f210";
 $fa-var-database:               "\f1c0";
+$fa-var-deaf:                   "\f2a4";
+$fa-var-deafness:               "\f2a4";
 $fa-var-dedent:                 "\f03b";
 $fa-var-delicious:              "\f1a5";
 $fa-var-desktop:                "\f108";
 $fa-var-deviantart:             "\f1bd";
+$fa-var-diamond:                "\f219";
 $fa-var-digg:                   "\f1a6";
 $fa-var-dollar:                 "\f155";
 $fa-var-dot-circle-o:           "\f192";
 $fa-var-download:               "\f019";
 $fa-var-dribbble:               "\f17d";
+$fa-var-drivers-license:        "\f2c2";
+$fa-var-drivers-license-o:      "\f2c3";
 $fa-var-dropbox:                "\f16b";
 $fa-var-drupal:                 "\f1a9";
+$fa-var-edge:                   "\f282";
 $fa-var-edit:                   "\f044";
+$fa-var-eercast:                "\f2da";
 $fa-var-eject:                  "\f052";
 $fa-var-ellipsis-h:             "\f141";
 $fa-var-ellipsis-v:             "\f142";
 $fa-var-empire:                 "\f1d1";
 $fa-var-envelope:               "\f0e0";
 $fa-var-envelope-o:             "\f003";
+$fa-var-envelope-open:          "\f2b6";
+$fa-var-envelope-open-o:        "\f2b7";
 $fa-var-envelope-square:        "\f199";
+$fa-var-envira:                 "\f299";
 $fa-var-eraser:                 "\f12d";
+$fa-var-etsy:                   "\f2d7";
 $fa-var-eur:                    "\f153";
 $fa-var-euro:                   "\f153";
 $fa-var-exchange:               "\f0ec";
@@ -184,16 +247,21 @@ $fa-var-exclamation:            "\f12a";
 $fa-var-exclamation-circle:     "\f06a";
 $fa-var-exclamation-triangle:   "\f071";
 $fa-var-expand:                 "\f065";
+$fa-var-expeditedssl:           "\f23e";
 $fa-var-external-link:          "\f08e";
 $fa-var-external-link-square:   "\f14c";
 $fa-var-eye:                    "\f06e";
 $fa-var-eye-slash:              "\f070";
 $fa-var-eyedropper:             "\f1fb";
+$fa-var-fa:                     "\f2b4";
 $fa-var-facebook:               "\f09a";
+$fa-var-facebook-f:             "\f09a";
+$fa-var-facebook-official:      "\f230";
 $fa-var-facebook-square:        "\f082";
 $fa-var-fast-backward:          "\f049";
 $fa-var-fast-forward:           "\f050";
 $fa-var-fax:                    "\f1ac";
+$fa-var-feed:                   "\f09e";
 $fa-var-female:                 "\f182";
 $fa-var-fighter-jet:            "\f0fb";
 $fa-var-file:                   "\f15b";
@@ -219,6 +287,8 @@ $fa-var-film:                   "\f008";
 $fa-var-filter:                 "\f0b0";
 $fa-var-fire:                   "\f06d";
 $fa-var-fire-extinguisher:      "\f134";
+$fa-var-firefox:                "\f269";
+$fa-var-first-order:            "\f2b0";
 $fa-var-flag:                   "\f024";
 $fa-var-flag-checkered:         "\f11e";
 $fa-var-flag-o:                 "\f11d";
@@ -231,8 +301,13 @@ $fa-var-folder-o:               "\f114";
 $fa-var-folder-open:            "\f07c";
 $fa-var-folder-open-o:          "\f115";
 $fa-var-font:                   "\f031";
+$fa-var-font-awesome:           "\f2b4";
+$fa-var-fonticons:              "\f280";
+$fa-var-fort-awesome:           "\f286";
+$fa-var-forumbee:               "\f211";
 $fa-var-forward:                "\f04e";
 $fa-var-foursquare:             "\f180";
+$fa-var-free-code-camp:         "\f2c5";
 $fa-var-frown-o:                "\f119";
 $fa-var-futbol-o:               "\f1e3";
 $fa-var-gamepad:                "\f11b";
@@ -241,45 +316,87 @@ $fa-var-gbp:                    "\f154";
 $fa-var-ge:                     "\f1d1";
 $fa-var-gear:                   "\f013";
 $fa-var-gears:                  "\f085";
+$fa-var-genderless:             "\f22d";
+$fa-var-get-pocket:             "\f265";
+$fa-var-gg:                     "\f260";
+$fa-var-gg-circle:              "\f261";
 $fa-var-gift:                   "\f06b";
 $fa-var-git:                    "\f1d3";
 $fa-var-git-square:             "\f1d2";
 $fa-var-github:                 "\f09b";
 $fa-var-github-alt:             "\f113";
 $fa-var-github-square:          "\f092";
+$fa-var-gitlab:                 "\f296";
 $fa-var-gittip:                 "\f184";
 $fa-var-glass:                  "\f000";
+$fa-var-glide:                  "\f2a5";
+$fa-var-glide-g:                "\f2a6";
 $fa-var-globe:                  "\f0ac";
 $fa-var-google:                 "\f1a0";
 $fa-var-google-plus:            "\f0d5";
+$fa-var-google-plus-circle:     "\f2b3";
+$fa-var-google-plus-official:   "\f2b3";
 $fa-var-google-plus-square:     "\f0d4";
 $fa-var-google-wallet:          "\f1ee";
 $fa-var-graduation-cap:         "\f19d";
+$fa-var-gratipay:               "\f184";
+$fa-var-grav:                   "\f2d6";
 $fa-var-group:                  "\f0c0";
 $fa-var-h-square:               "\f0fd";
 $fa-var-hacker-news:            "\f1d4";
+$fa-var-hand-grab-o:            "\f255";
+$fa-var-hand-lizard-o:          "\f258";
 $fa-var-hand-o-down:            "\f0a7";
 $fa-var-hand-o-left:            "\f0a5";
 $fa-var-hand-o-right:           "\f0a4";
 $fa-var-hand-o-up:              "\f0a6";
+$fa-var-hand-paper-o:           "\f256";
+$fa-var-hand-peace-o:           "\f25b";
+$fa-var-hand-pointer-o:         "\f25a";
+$fa-var-hand-rock-o:            "\f255";
+$fa-var-hand-scissors-o:        "\f257";
+$fa-var-hand-spock-o:           "\f259";
+$fa-var-hand-stop-o:            "\f256";
+$fa-var-handshake-o:            "\f2b5";
+$fa-var-hard-of-hearing:        "\f2a4";
+$fa-var-hashtag:                "\f292";
 $fa-var-hdd-o:                  "\f0a0";
 $fa-var-header:                 "\f1dc";
 $fa-var-headphones:             "\f025";
 $fa-var-heart:                  "\f004";
 $fa-var-heart-o:                "\f08a";
+$fa-var-heartbeat:              "\f21e";
 $fa-var-history:                "\f1da";
 $fa-var-home:                   "\f015";
 $fa-var-hospital-o:             "\f0f8";
+$fa-var-hotel:                  "\f236";
+$fa-var-hourglass:              "\f254";
+$fa-var-hourglass-1:            "\f251";
+$fa-var-hourglass-2:            "\f252";
+$fa-var-hourglass-3:            "\f253";
+$fa-var-hourglass-end:          "\f253";
+$fa-var-hourglass-half:         "\f252";
+$fa-var-hourglass-o:            "\f250";
+$fa-var-hourglass-start:        "\f251";
+$fa-var-houzz:                  "\f27c";
 $fa-var-html5:                  "\f13b";
+$fa-var-i-cursor:               "\f246";
+$fa-var-id-badge:               "\f2c1";
+$fa-var-id-card:                "\f2c2";
+$fa-var-id-card-o:              "\f2c3";
 $fa-var-ils:                    "\f20b";
 $fa-var-image:                  "\f03e";
+$fa-var-imdb:                   "\f2d8";
 $fa-var-inbox:                  "\f01c";
 $fa-var-indent:                 "\f03c";
+$fa-var-industry:               "\f275";
 $fa-var-info:                   "\f129";
 $fa-var-info-circle:            "\f05a";
 $fa-var-inr:                    "\f156";
 $fa-var-instagram:              "\f16d";
 $fa-var-institution:            "\f19c";
+$fa-var-internet-explorer:      "\f26b";
+$fa-var-intersex:               "\f224";
 $fa-var-ioxhost:                "\f208";
 $fa-var-italic:                 "\f033";
 $fa-var-joomla:                 "\f1aa";
@@ -293,6 +410,7 @@ $fa-var-laptop:                 "\f109";
 $fa-var-lastfm:                 "\f202";
 $fa-var-lastfm-square:          "\f203";
 $fa-var-leaf:                   "\f06c";
+$fa-var-leanpub:                "\f212";
 $fa-var-legal:                  "\f0e3";
 $fa-var-lemon-o:                "\f094";
 $fa-var-level-down:             "\f149";
@@ -306,6 +424,7 @@ $fa-var-line-chart:             "\f201";
 $fa-var-link:                   "\f0c1";
 $fa-var-linkedin:               "\f0e1";
 $fa-var-linkedin-square:        "\f08c";
+$fa-var-linode:                 "\f2b8";
 $fa-var-linux:                  "\f17c";
 $fa-var-list:                   "\f03a";
 $fa-var-list-alt:               "\f022";
@@ -317,32 +436,58 @@ $fa-var-long-arrow-down:        "\f175";
 $fa-var-long-arrow-left:        "\f177";
 $fa-var-long-arrow-right:       "\f178";
 $fa-var-long-arrow-up:          "\f176";
+$fa-var-low-vision:             "\f2a8";
 $fa-var-magic:                  "\f0d0";
 $fa-var-magnet:                 "\f076";
 $fa-var-mail-forward:           "\f064";
 $fa-var-mail-reply:             "\f112";
 $fa-var-mail-reply-all:         "\f122";
 $fa-var-male:                   "\f183";
+$fa-var-map:                    "\f279";
 $fa-var-map-marker:             "\f041";
+$fa-var-map-o:                  "\f278";
+$fa-var-map-pin:                "\f276";
+$fa-var-map-signs:              "\f277";
+$fa-var-mars:                   "\f222";
+$fa-var-mars-double:            "\f227";
+$fa-var-mars-stroke:            "\f229";
+$fa-var-mars-stroke-h:          "\f22b";
+$fa-var-mars-stroke-v:          "\f22a";
 $fa-var-maxcdn:                 "\f136";
 $fa-var-meanpath:               "\f20c";
+$fa-var-medium:                 "\f23a";
 $fa-var-medkit:                 "\f0fa";
+$fa-var-meetup:                 "\f2e0";
 $fa-var-meh-o:                  "\f11a";
+$fa-var-mercury:                "\f223";
+$fa-var-microchip:              "\f2db";
 $fa-var-microphone:             "\f130";
 $fa-var-microphone-slash:       "\f131";
 $fa-var-minus:                  "\f068";
 $fa-var-minus-circle:           "\f056";
 $fa-var-minus-square:           "\f146";
 $fa-var-minus-square-o:         "\f147";
+$fa-var-mixcloud:               "\f289";
 $fa-var-mobile:                 "\f10b";
 $fa-var-mobile-phone:           "\f10b";
+$fa-var-modx:                   "\f285";
 $fa-var-money:                  "\f0d6";
 $fa-var-moon-o:                 "\f186";
 $fa-var-mortar-board:           "\f19d";
+$fa-var-motorcycle:             "\f21c";
+$fa-var-mouse-pointer:          "\f245";
 $fa-var-music:                  "\f001";
 $fa-var-navicon:                "\f0c9";
+$fa-var-neuter:                 "\f22c";
 $fa-var-newspaper-o:            "\f1ea";
+$fa-var-object-group:           "\f247";
+$fa-var-object-ungroup:         "\f248";
+$fa-var-odnoklassniki:          "\f263";
+$fa-var-odnoklassniki-square:   "\f264";
+$fa-var-opencart:               "\f23d";
 $fa-var-openid:                 "\f19b";
+$fa-var-opera:                  "\f26a";
+$fa-var-optin-monster:          "\f23c";
 $fa-var-outdent:                "\f03b";
 $fa-var-pagelines:              "\f18c";
 $fa-var-paint-brush:            "\f1fc";
@@ -352,19 +497,24 @@ $fa-var-paperclip:              "\f0c6";
 $fa-var-paragraph:              "\f1dd";
 $fa-var-paste:                  "\f0ea";
 $fa-var-pause:                  "\f04c";
+$fa-var-pause-circle:           "\f28b";
+$fa-var-pause-circle-o:         "\f28c";
 $fa-var-paw:                    "\f1b0";
 $fa-var-paypal:                 "\f1ed";
 $fa-var-pencil:                 "\f040";
 $fa-var-pencil-square:          "\f14b";
 $fa-var-pencil-square-o:        "\f044";
+$fa-var-percent:                "\f295";
 $fa-var-phone:                  "\f095";
 $fa-var-phone-square:           "\f098";
 $fa-var-photo:                  "\f03e";
 $fa-var-picture-o:              "\f03e";
 $fa-var-pie-chart:              "\f200";
-$fa-var-pied-piper:             "\f1a7";
+$fa-var-pied-piper:             "\f2ae";
 $fa-var-pied-piper-alt:         "\f1a8";
+$fa-var-pied-piper-pp:          "\f1a7";
 $fa-var-pinterest:              "\f0d2";
+$fa-var-pinterest-p:            "\f231";
 $fa-var-pinterest-square:       "\f0d3";
 $fa-var-plane:                  "\f072";
 $fa-var-play:                   "\f04b";
@@ -375,28 +525,36 @@ $fa-var-plus:                   "\f067";
 $fa-var-plus-circle:            "\f055";
 $fa-var-plus-square:            "\f0fe";
 $fa-var-plus-square-o:          "\f196";
+$fa-var-podcast:                "\f2ce";
 $fa-var-power-off:              "\f011";
 $fa-var-print:                  "\f02f";
+$fa-var-product-hunt:           "\f288";
 $fa-var-puzzle-piece:           "\f12e";
 $fa-var-qq:                     "\f1d6";
 $fa-var-qrcode:                 "\f029";
 $fa-var-question:               "\f128";
 $fa-var-question-circle:        "\f059";
+$fa-var-question-circle-o:      "\f29c";
+$fa-var-quora:                  "\f2c4";
 $fa-var-quote-left:             "\f10d";
 $fa-var-quote-right:            "\f10e";
 $fa-var-ra:                     "\f1d0";
 $fa-var-random:                 "\f074";
+$fa-var-ravelry:                "\f2d9";
 $fa-var-rebel:                  "\f1d0";
 $fa-var-recycle:                "\f1b8";
 $fa-var-reddit:                 "\f1a1";
+$fa-var-reddit-alien:           "\f281";
 $fa-var-reddit-square:          "\f1a2";
 $fa-var-refresh:                "\f021";
+$fa-var-registered:             "\f25d";
 $fa-var-remove:                 "\f00d";
 $fa-var-renren:                 "\f18b";
 $fa-var-reorder:                "\f0c9";
 $fa-var-repeat:                 "\f01e";
 $fa-var-reply:                  "\f112";
 $fa-var-reply-all:              "\f122";
+$fa-var-resistance:             "\f1d0";
 $fa-var-retweet:                "\f079";
 $fa-var-rmb:                    "\f157";
 $fa-var-road:                   "\f018";
@@ -409,13 +567,18 @@ $fa-var-rss-square:             "\f143";
 $fa-var-rub:                    "\f158";
 $fa-var-ruble:                  "\f158";
 $fa-var-rupee:                  "\f156";
+$fa-var-s15:                    "\f2cd";
+$fa-var-safari:                 "\f267";
 $fa-var-save:                   "\f0c7";
 $fa-var-scissors:               "\f0c4";
+$fa-var-scribd:                 "\f28a";
 $fa-var-search:                 "\f002";
 $fa-var-search-minus:           "\f010";
 $fa-var-search-plus:            "\f00e";
+$fa-var-sellsy:                 "\f213";
 $fa-var-send:                   "\f1d8";
 $fa-var-send-o:                 "\f1d9";
+$fa-var-server:                 "\f233";
 $fa-var-share:                  "\f064";
 $fa-var-share-alt:              "\f1e0";
 $fa-var-share-alt-square:       "\f1e1";
@@ -424,16 +587,29 @@ $fa-var-share-square-o:         "\f045";
 $fa-var-shekel:                 "\f20b";
 $fa-var-sheqel:                 "\f20b";
 $fa-var-shield:                 "\f132";
+$fa-var-ship:                   "\f21a";
+$fa-var-shirtsinbulk:           "\f214";
+$fa-var-shopping-bag:           "\f290";
+$fa-var-shopping-basket:        "\f291";
 $fa-var-shopping-cart:          "\f07a";
+$fa-var-shower:                 "\f2cc";
 $fa-var-sign-in:                "\f090";
+$fa-var-sign-language:          "\f2a7";
 $fa-var-sign-out:               "\f08b";
 $fa-var-signal:                 "\f012";
+$fa-var-signing:                "\f2a7";
+$fa-var-simplybuilt:            "\f215";
 $fa-var-sitemap:                "\f0e8";
+$fa-var-skyatlas:               "\f216";
 $fa-var-skype:                  "\f17e";
 $fa-var-slack:                  "\f198";
 $fa-var-sliders:                "\f1de";
 $fa-var-slideshare:             "\f1e7";
 $fa-var-smile-o:                "\f118";
+$fa-var-snapchat:               "\f2ab";
+$fa-var-snapchat-ghost:         "\f2ac";
+$fa-var-snapchat-square:        "\f2ad";
+$fa-var-snowflake-o:            "\f2dc";
 $fa-var-soccer-ball-o:          "\f1e3";
 $fa-var-sort:                   "\f0dc";
 $fa-var-sort-alpha-asc:         "\f15d";
@@ -466,13 +642,20 @@ $fa-var-steam-square:           "\f1b7";
 $fa-var-step-backward:          "\f048";
 $fa-var-step-forward:           "\f051";
 $fa-var-stethoscope:            "\f0f1";
+$fa-var-sticky-note:            "\f249";
+$fa-var-sticky-note-o:          "\f24a";
 $fa-var-stop:                   "\f04d";
+$fa-var-stop-circle:            "\f28d";
+$fa-var-stop-circle-o:          "\f28e";
+$fa-var-street-view:            "\f21d";
 $fa-var-strikethrough:          "\f0cc";
 $fa-var-stumbleupon:            "\f1a4";
 $fa-var-stumbleupon-circle:     "\f1a3";
 $fa-var-subscript:              "\f12c";
+$fa-var-subway:                 "\f239";
 $fa-var-suitcase:               "\f0f2";
 $fa-var-sun-o:                  "\f185";
+$fa-var-superpowers:            "\f2dd";
 $fa-var-superscript:            "\f12b";
 $fa-var-support:                "\f1cd";
 $fa-var-table:                  "\f0ce";
@@ -482,6 +665,8 @@ $fa-var-tag:                    "\f02b";
 $fa-var-tags:                   "\f02c";
 $fa-var-tasks:                  "\f0ae";
 $fa-var-taxi:                   "\f1ba";
+$fa-var-telegram:               "\f2c6";
+$fa-var-television:             "\f26c";
 $fa-var-tencent-weibo:          "\f1d5";
 $fa-var-terminal:               "\f120";
 $fa-var-text-height:            "\f034";
@@ -489,6 +674,18 @@ $fa-var-text-width:             "\f035";
 $fa-var-th:                     "\f00a";
 $fa-var-th-large:               "\f009";
 $fa-var-th-list:                "\f00b";
+$fa-var-themeisle:              "\f2b2";
+$fa-var-thermometer:            "\f2c7";
+$fa-var-thermometer-0:          "\f2cb";
+$fa-var-thermometer-1:          "\f2ca";
+$fa-var-thermometer-2:          "\f2c9";
+$fa-var-thermometer-3:          "\f2c8";
+$fa-var-thermometer-4:          "\f2c7";
+$fa-var-thermometer-empty:      "\f2cb";
+$fa-var-thermometer-full:       "\f2c7";
+$fa-var-thermometer-half:       "\f2c9";
+$fa-var-thermometer-quarter:    "\f2ca";
+$fa-var-thermometer-three-quarters: "\f2c8";
 $fa-var-thumb-tack:             "\f08d";
 $fa-var-thumbs-down:            "\f165";
 $fa-var-thumbs-o-down:          "\f088";
@@ -498,6 +695,8 @@ $fa-var-ticket:                 "\f145";
 $fa-var-times:                  "\f00d";
 $fa-var-times-circle:           "\f057";
 $fa-var-times-circle-o:         "\f05c";
+$fa-var-times-rectangle:        "\f2d3";
+$fa-var-times-rectangle-o:      "\f2d4";
 $fa-var-tint:                   "\f043";
 $fa-var-toggle-down:            "\f150";
 $fa-var-toggle-left:            "\f191";
@@ -505,10 +704,15 @@ $fa-var-toggle-off:             "\f204";
 $fa-var-toggle-on:              "\f205";
 $fa-var-toggle-right:           "\f152";
 $fa-var-toggle-up:              "\f151";
+$fa-var-trademark:              "\f25c";
+$fa-var-train:                  "\f238";
+$fa-var-transgender:            "\f224";
+$fa-var-transgender-alt:        "\f225";
 $fa-var-trash:                  "\f1f8";
 $fa-var-trash-o:                "\f014";
 $fa-var-tree:                   "\f1bb";
 $fa-var-trello:                 "\f181";
+$fa-var-tripadvisor:            "\f262";
 $fa-var-trophy:                 "\f091";
 $fa-var-truck:                  "\f0d1";
 $fa-var-try:                    "\f195";
@@ -516,26 +720,45 @@ $fa-var-tty:                    "\f1e4";
 $fa-var-tumblr:                 "\f173";
 $fa-var-tumblr-square:          "\f174";
 $fa-var-turkish-lira:           "\f195";
+$fa-var-tv:                     "\f26c";
 $fa-var-twitch:                 "\f1e8";
 $fa-var-twitter:                "\f099";
 $fa-var-twitter-square:         "\f081";
 $fa-var-umbrella:               "\f0e9";
 $fa-var-underline:              "\f0cd";
 $fa-var-undo:                   "\f0e2";
+$fa-var-universal-access:       "\f29a";
 $fa-var-university:             "\f19c";
 $fa-var-unlink:                 "\f127";
 $fa-var-unlock:                 "\f09c";
 $fa-var-unlock-alt:             "\f13e";
 $fa-var-unsorted:               "\f0dc";
 $fa-var-upload:                 "\f093";
+$fa-var-usb:                    "\f287";
 $fa-var-usd:                    "\f155";
 $fa-var-user:                   "\f007";
+$fa-var-user-circle:            "\f2bd";
+$fa-var-user-circle-o:          "\f2be";
 $fa-var-user-md:                "\f0f0";
+$fa-var-user-o:                 "\f2c0";
+$fa-var-user-plus:              "\f234";
+$fa-var-user-secret:            "\f21b";
+$fa-var-user-times:             "\f235";
 $fa-var-users:                  "\f0c0";
+$fa-var-vcard:                  "\f2bb";
+$fa-var-vcard-o:                "\f2bc";
+$fa-var-venus:                  "\f221";
+$fa-var-venus-double:           "\f226";
+$fa-var-venus-mars:             "\f228";
+$fa-var-viacoin:                "\f237";
+$fa-var-viadeo:                 "\f2a9";
+$fa-var-viadeo-square:          "\f2aa";
 $fa-var-video-camera:           "\f03d";
+$fa-var-vimeo:                  "\f27d";
 $fa-var-vimeo-square:           "\f194";
 $fa-var-vine:                   "\f1ca";
 $fa-var-vk:                     "\f189";
+$fa-var-volume-control-phone:   "\f2a0";
 $fa-var-volume-down:            "\f027";
 $fa-var-volume-off:             "\f026";
 $fa-var-volume-up:              "\f028";
@@ -543,17 +766,33 @@ $fa-var-warning:                "\f071";
 $fa-var-wechat:                 "\f1d7";
 $fa-var-weibo:                  "\f18a";
 $fa-var-weixin:                 "\f1d7";
+$fa-var-whatsapp:               "\f232";
 $fa-var-wheelchair:             "\f193";
+$fa-var-wheelchair-alt:         "\f29b";
 $fa-var-wifi:                   "\f1eb";
+$fa-var-wikipedia-w:            "\f266";
+$fa-var-window-close:           "\f2d3";
+$fa-var-window-close-o:         "\f2d4";
+$fa-var-window-maximize:        "\f2d0";
+$fa-var-window-minimize:        "\f2d1";
+$fa-var-window-restore:         "\f2d2";
 $fa-var-windows:                "\f17a";
 $fa-var-won:                    "\f159";
 $fa-var-wordpress:              "\f19a";
+$fa-var-wpbeginner:             "\f297";
+$fa-var-wpexplorer:             "\f2de";
+$fa-var-wpforms:                "\f298";
 $fa-var-wrench:                 "\f0ad";
 $fa-var-xing:                   "\f168";
 $fa-var-xing-square:            "\f169";
+$fa-var-y-combinator:           "\f23b";
+$fa-var-y-combinator-square:    "\f1d4";
 $fa-var-yahoo:                  "\f19e";
+$fa-var-yc:                     "\f23b";
+$fa-var-yc-square:              "\f1d4";
 $fa-var-yelp:                   "\f1e9";
 $fa-var-yen:                    "\f157";
+$fa-var-yoast:                  "\f2b1";
 $fa-var-youtube:                "\f167";
 $fa-var-youtube-play:           "\f16a";
 $fa-var-youtube-square:         "\f166";

src/sass/mixins/_buttons.scss

@@ -50,9 +50,9 @@
   }
 
   &:active {
+    transform: translate(0, 1px);
     border-color: $active-border;
     background-color: $active-bg;
     box-shadow: $active-shadow;
-        @include translate(0, 1px);
   }
 }

src/sass/mixins/_clearfix.scss

@@ -1,34 +1,15 @@
 // Clearfix
 //
-// 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.
-// 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
-//    that are clearfixed.
-//
-// Source: http://nicolasgallagher.com/micro-clearfix-hack/
+// Source: http://cssmojo.com/the-very-latest-clearfix-reloaded/
 
 @mixin clearfix() {
-    &:before,
-    &:after {
-        display: table; // 1
-        content: " "; // 2
-    }
-
-    &:after {
+  &::after {
+    content: "";
+    display: block;
     clear: both;
   }
 }
 
-
-// Lighter (for output CSS) cleafix with placeholder
-
 %clearfix {
-    &:after {
-        display: table;
-        clear: both;
-        content: "";
-    }
+  @include clearfix;
 }

src/sass/mixins/_forms.scss

@@ -2,9 +2,18 @@
 //
 @mixin form-control-focus($color: $input-border-focus) {
   &:focus {
-        border-color: $color;
+    border-color: rgba($input-border-focus, $input-border-focus-alpha);
     outline: 0;
-        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba($color, .5);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 0 2px rgba($input-border-focus, $input-shadow-focus-alpha);
+  }
+}
+
+// Placeholder text
+//
+@mixin placeholder($color: $input-color-placeholder) {
+  &::placeholder {
+    opacity: 1; // See https://github.com/twbs/bootstrap/pull/11526
+    color: $color;
   }
 }
 
@@ -31,13 +40,36 @@
   }
 }
 
-@mixin checkbox() {
-    padding-left: 20px;
-    @include user-select(none);
+@mixin check() {
   @extend %clearfix;
+  position: relative;
+  padding-left: $check-input-gutter;
+  text-align: left;
+  font-weight: $font-weight-normal;
 
-    input[type="checkbox"] {
-        margin-left: -20px;
-        float: left;
+  input[type="checkbox"],
+  input[type="radio"] {
+    position: absolute;
+    width: auto;
+    margin-top: $check-input-margin-vertical;
+    margin-left: -$check-input-gutter;
+  }
+}
+
+@mixin check-inline() {
+  @include check;
+  display: inline-block;
+  margin-right: $check-input-margin-horizontal;
+}
+
+@mixin check-list() {
+  @include check;
+  display: block;
+  width: auto;
+  margin: $btn-padding-vertical 0;
+  float: none;
+
+  @media screen and (min-width: $screen-sm-min) {
+    margin: 0;
   }
 }

src/sass/mixins/_gradients.scss

@@ -1,62 +0,0 @@
-// Gradients
-// scss-lint:disable VendorPrefix
-
-
-// Horizontal gradient, from left to right
-//
-// Creates two color stops, start and end, by specifying a color and position for each color stop.
-// Color stops are not available in IE9 and below.
-@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
-    background-image: -webkit-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
-    background-image: -o-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Opera 12
-    background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
-    background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
-}
-
-// Vertical gradient, from top to bottom
-//
-// Creates two color stops, start and end, by specifying a color and position for each color stop.
-// Color stops are not available in IE9 and below.
-@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
-    background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Safari 5.1-6, Chrome 10+
-    background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Opera 12
-    background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
-    background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
-}
-
-@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
-    background-repeat: repeat-x;
-    background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
-    background-image: -o-linear-gradient($deg, $start-color, $end-color); // Opera 12
-    background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
-}
-
-@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
-    background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
-    background-image: -o-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
-    background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
-    background-repeat: no-repeat;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
-}
-
-@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
-    background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
-    background-image: -o-linear-gradient($start-color, $mid-color $color-stop, $end-color);
-    background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
-    background-repeat: no-repeat;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
-}
-
-@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
-    background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
-    background-image: radial-gradient(circle, $inner-color, $outer-color);
-    background-repeat: no-repeat;
-}
-
-@mixin gradient-striped($color: rgba(255, 255, 255, .15), $angle: 45deg) {
-    background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
-    background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
-    background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
-}

src/sass/mixins/_issues.scss

@@ -7,6 +7,20 @@
 
   $border-color: darken(desaturate($background, 30%), 13.5%);
 
+  table.list:not(.odd-even) tbody tr#{$parent} {
+    @if $table-list-color-odd-rows {
+      &:nth-child(odd) {
+        background: darken($background, $table-accent-factor * 100%);
+      }
+    }
+
+    @if $table-list-color-even-rows {
+      &:nth-child(even) {
+        background: darken($background, $table-accent-factor * 100%);
+      }
+    }
+  }
+
   tr#{$parent} {
     background: $background;
 
@@ -109,6 +123,12 @@
       }
 
       > .attachments {
+        span.author {
+          color: mix($color, $gray, 25%);
+        }
+      }
+
+      > .description + .attachments {
         border-top-color: lighten($border-color, 5%);
 
         @if ".priority-default" == $parent {
@@ -116,10 +136,6 @@
         } @else {
           background-color: lighten($background, 5%);
         }
-
-                span.author {
-                    color: mix($color, $gray, 25%);
-                }
       }
 
       .list td {
@@ -154,18 +170,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%);
     }
   }

src/sass/mixins/_opacity.scss

@@ -1,8 +0,0 @@
-// Opacity
-
-@mixin opacity($opacity) {
-    opacity: $opacity;
-    // IE8 filter
-    $opacity-ie: ($opacity * 100);
-    filter: #{alpha(opacity=$opacity-ie)};
-}

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;

src/sass/mixins/_vendor-prefixes.scss

@@ -1,236 +0,0 @@
-// Vendor Prefixes
-// scss-lint:disable VendorPrefix NameFormat
-//
-// All vendor mixins are deprecated as of v3.2.0 due to the introduction of
-// Autoprefixer in our Gruntfile. They will be removed in v4.
-
-// - Animations
-// - Backface visibility
-// - Box shadow
-// - Box sizing
-// - Content columns
-// - Hyphens
-// - Placeholder text
-// - Transformations
-// - Transitions
-// - User Select
-
-
-// Animations
-@mixin animation($animation) {
-    -webkit-animation: $animation;
-         -o-animation: $animation;
-            animation: $animation;
-}
-
-@mixin animation-name($name) {
-    -webkit-animation-name: $name;
-            animation-name: $name;
-}
-
-@mixin animation-duration($duration) {
-    -webkit-animation-duration: $duration;
-            animation-duration: $duration;
-}
-
-@mixin animation-timing-function($timing-function) {
-    -webkit-animation-timing-function: $timing-function;
-            animation-timing-function: $timing-function;
-}
-
-@mixin animation-delay($delay) {
-    -webkit-animation-delay: $delay;
-            animation-delay: $delay;
-}
-
-@mixin animation-iteration-count($iteration-count) {
-    -webkit-animation-iteration-count: $iteration-count;
-            animation-iteration-count: $iteration-count;
-}
-
-@mixin animation-direction($direction) {
-    -webkit-animation-direction: $direction;
-            animation-direction: $direction;
-}
-
-@mixin animation-fill-mode($fill-mode) {
-    -webkit-animation-fill-mode: $fill-mode;
-            animation-fill-mode: $fill-mode;
-}
-
-// Backface visibility
-// Prevent browsers from flickering when using CSS 3D transforms.
-// Default value is `visible`, but can be changed to `hidden`
-
-@mixin backface-visibility($visibility) {
-    -webkit-backface-visibility: $visibility;
-       -moz-backface-visibility: $visibility;
-            backface-visibility: $visibility;
-}
-
-// Box sizing
-@mixin box-sizing($boxmodel) {
-    -webkit-box-sizing: $boxmodel;
-       -moz-box-sizing: $boxmodel;
-            box-sizing: $boxmodel;
-}
-
-// CSS3 Content Columns
-@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
-    -webkit-column-count: $column-count;
-       -moz-column-count: $column-count;
-            column-count: $column-count;
-    -webkit-column-gap: $column-gap;
-       -moz-column-gap: $column-gap;
-            column-gap: $column-gap;
-}
-
-// Optional hyphenation
-@mixin hyphens($mode: auto) {
-    word-wrap: break-word;
-    -webkit-hyphens: $mode;
-       -moz-hyphens: $mode;
-        -ms-hyphens: $mode; // IE10+
-         -o-hyphens: $mode;
-            hyphens: $mode;
-}
-
-// Placeholder text
-@mixin placeholder($color: $input-color-placeholder) {
-    // Firefox
-    &::-moz-placeholder {
-        color: $color;
-        opacity: 1; // See https://github.com/twbs/bootstrap/pull/11526
-    }
-
-    &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
-    &::-webkit-input-placeholder  { color: $color; } // Safari and Chrome
-}
-
-// Transformations
-@mixin scale($ratio...) {
-    -webkit-transform: scale($ratio);
-        -ms-transform: scale($ratio); // IE9 only
-         -o-transform: scale($ratio);
-            transform: scale($ratio);
-}
-
-@mixin scaleX($ratio) {
-    -webkit-transform: scaleX($ratio);
-        -ms-transform: scaleX($ratio); // IE9 only
-         -o-transform: scaleX($ratio);
-            transform: scaleX($ratio);
-}
-
-@mixin scaleY($ratio) {
-    -webkit-transform: scaleY($ratio);
-        -ms-transform: scaleY($ratio); // IE9 only
-         -o-transform: scaleY($ratio);
-            transform: scaleY($ratio);
-}
-
-@mixin skew($x, $y) {
-    -webkit-transform: skewX($x) skewY($y);
-        -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
-         -o-transform: skewX($x) skewY($y);
-            transform: skewX($x) skewY($y);
-}
-
-@mixin translate($x, $y) {
-    -webkit-transform: translate($x, $y);
-        -ms-transform: translate($x, $y); // IE9 only
-         -o-transform: translate($x, $y);
-            transform: translate($x, $y);
-}
-
-@mixin translate3d($x, $y, $z) {
-    -webkit-transform: translate3d($x, $y, $z);
-            transform: translate3d($x, $y, $z);
-}
-
-@mixin rotate($degrees) {
-    -webkit-transform: rotate($degrees);
-        -ms-transform: rotate($degrees); // IE9 only
-         -o-transform: rotate($degrees);
-            transform: rotate($degrees);
-}
-
-@mixin rotateX($degrees) {
-    -webkit-transform: rotateX($degrees);
-        -ms-transform: rotateX($degrees); // IE9 only
-         -o-transform: rotateX($degrees);
-            transform: rotateX($degrees);
-}
-
-@mixin rotateY($degrees) {
-    -webkit-transform: rotateY($degrees);
-        -ms-transform: rotateY($degrees); // IE9 only
-         -o-transform: rotateY($degrees);
-            transform: rotateY($degrees);
-}
-
-@mixin perspective($perspective) {
-    -webkit-perspective: $perspective;
-       -moz-perspective: $perspective;
-            perspective: $perspective;
-}
-
-@mixin perspective-origin($perspective) {
-    -webkit-perspective-origin: $perspective;
-       -moz-perspective-origin: $perspective;
-            perspective-origin: $perspective;
-}
-
-@mixin transform-origin($origin) {
-    -webkit-transform-origin: $origin;
-       -moz-transform-origin: $origin;
-        -ms-transform-origin: $origin; // IE9 only
-            transform-origin: $origin;
-}
-
-
-// Transitions
-
-@mixin transition($transition...) {
-    -webkit-transition: $transition;
-         -o-transition: $transition;
-            transition: $transition;
-}
-
-@mixin transition-property($transition-property...) {
-    -webkit-transition-property: $transition-property;
-            transition-property: $transition-property;
-}
-
-@mixin transition-delay($transition-delay) {
-    -webkit-transition-delay: $transition-delay;
-            transition-delay: $transition-delay;
-}
-
-@mixin transition-duration($transition-duration...) {
-    -webkit-transition-duration: $transition-duration;
-            transition-duration: $transition-duration;
-}
-
-@mixin transition-timing-function($timing-function) {
-    -webkit-transition-timing-function: $timing-function;
-            transition-timing-function: $timing-function;
-}
-
-@mixin transition-transform($transition...) {
-    -webkit-transition: -webkit-transform $transition;
-       -moz-transition: -moz-transform $transition;
-         -o-transition: -o-transform $transition;
-            transition: transform $transition;
-}
-
-
-// User select
-// For selecting text on the page
-
-@mixin user-select($select) {
-    -webkit-user-select: $select;
-       -moz-user-select: $select;
-        -ms-user-select: $select; // IE10+
-            user-select: $select;
-}

src/sass/plugins/redmine_backlogs/global.scss

@@ -1,8 +1,8 @@
 @import "common";
 
 html {
-    overflow-y: scroll;
   height: 100%;
+  overflow-y: scroll;
 }
 
 body {
@@ -43,18 +43,17 @@ a {
 }
 
 
-/**
- * Form elements
- */
+//== Form elements
+//
 
 button,
 input,
 select,
 textarea {
+  box-sizing: border-box;
   font-family: inherit;
   font-size: $font-size-base;
   line-height: $line-height-base;
-    @include box-sizing(border-box);
 }
 
 select,
@@ -64,21 +63,21 @@ input[type="text"],
 input.name,
 input.editor,
 #col_width input {
+  @include form-control-focus;
+  @include placeholder;
   height: $input-height-base;
   padding: $input-padding-vertical $input-padding-horizontal;
+  transition: border-color ease-in-out .1s, box-shadow ease-in-out .1s;
   border: 1px solid $input-border;
   border-radius: $input-border-radius;
   background-color: $input-bg;
-    color: $input-color;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
-    @include transition(border-color ease-in-out .1s, box-shadow ease-in-out .1s);
-    @include form-control-focus();
-    @include placeholder();
+  color: $input-color;
 }
 
 textarea {
-    resize: vertical;
   height: auto;
+  resize: vertical;
 }
 
 select:-moz-focusring {
@@ -87,17 +86,17 @@ select:-moz-focusring {
 }
 
 button.ui-multiselect {
+  box-sizing: border-box;
   height: $input-height-base;
   padding: $input-padding-vertical $input-padding-horizontal;
+  overflow: hidden;
+  transition: border-color ease-in-out .1s, box-shadow ease-in-out .1s;
   border: 1px solid $input-border;
   background: $input-bg;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
   color: $input-color;
   white-space: nowrap;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
   cursor: default;
-    overflow: hidden;
-    @include transition(border-color ease-in-out .1s, box-shadow ease-in-out .1s);
-    @include box-sizing(border-box);
 
   &:hover,
   &:focus {
@@ -105,7 +104,7 @@ button.ui-multiselect {
   }
 
   &:active {
-        @include translate(0, 0);
+    transform: translate(0, 0);
   }
 
   &.ui-state-active {
@@ -119,19 +118,18 @@ button.ui-multiselect {
 }
 
 
-/**
- * Top toolbar
- */
+//== Top toolbar
+//
 
 #toolbar {
+  @include clearfix;
   display: block;
   position: relative;
+  z-index: 1000;
   padding: 10px $padding-side;
+  overflow: hidden;
   background-color: $main-menu-bg;
   box-shadow: $panel-shadow;
-    overflow: hidden;
-    z-index: 1000;
-    @include clearfix;
 
   .breadcrumbs {
     margin-right: 10px;
@@ -173,7 +171,7 @@ button.ui-multiselect {
     a {
       padding-left: 5px;
       cursor: pointer;
-            @include user-select(none);
+      user-select: none;
     }
   }
 
@@ -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 {
@@ -268,8 +262,8 @@ ul.ui-sortable {
   .issue-description {
     max-height: 10em;
     margin-top: 12px;
-        text-overflow: ellipsis;
     overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .issue-field {
@@ -294,14 +288,13 @@ 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 {
-    background-color: $gray-lighter;
   opacity: .5;
+  background-color: $gray-lighter;
 }
 
 .w-rb-header-collapsed {
@@ -310,9 +303,8 @@ ul.ui-sortable {
 }
 
 
-/**
- * Fix jQuery-UI datepicker
- */
+//== Fix jQuery-UI datepicker
+//
 
 body {
   .ui-widget {

src/sass/plugins/redmine_backlogs/jquery/jquery-ui.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable ImportantRule
+// scss-lint:disable Comment
 @import "../common";
 
 /*
@@ -22,22 +22,22 @@
 .ui-helper-reset {
   margin: 0;
   padding: 0;
+  list-style: none;
   border: 0;
   outline: 0;
   font-size: 100%;
-    list-style: none;
   text-decoration: none;
 }
 
 .ui-helper-clearfix {
   display: inline-block;
 
-    &:after {
+  &::after {
+    content: ".";
     display: block;
+    visibility: hidden;
     height: 0;
     clear: both;
-        content: ".";
-        visibility: hidden;
   }
 }
 
@@ -66,7 +66,7 @@
 ----------------------------------*/
 
 .ui-state-disabled {
-    cursor: default !important;
+  cursor: default !important; // scss-lint:disable ImportantRule
 }
 
 /* Icons
@@ -76,9 +76,9 @@
 
 .ui-icon {
   display: block;
+  overflow: hidden;
   background-repeat: no-repeat;
   text-indent: -9999px;
-    overflow: hidden;
 }
 
 /* Misc visuals
@@ -156,9 +156,9 @@
 .ui-widget-header .ui-state-default {
   border: 1px solid $component-border;
   background: $component-bg;
+  box-shadow: none;
   color: $component-color;
   font-weight: normal;
-    box-shadow: none;
 }
 
 .ui-state-default a,
@@ -250,14 +250,14 @@
 
 .ui-priority-secondary,
 .ui-widget-content .ui-priority-secondary {
-    font-weight: normal;
   opacity: .7;
+  font-weight: normal;
 }
 
 .ui-state-disabled,
 .ui-widget-content .ui-state-disabled {
-    background-image: none;
   opacity: .35;
+  background-image: none;
 }
 
 /* Icons
@@ -520,16 +520,16 @@
 /* Overlays */
 
 .ui-widget-overlay {
+  opacity: .3;
   background: #000;
-    opacity: .30;
 }
 
 .ui-widget-shadow {
   margin: -8px 0 0 -8px;
   padding: 8px;
   border-radius: 8px;
+  opacity: .3;
   background: #aaa;
-    opacity: .30;
 }
 
 /* Resizable
@@ -542,8 +542,8 @@
 .ui-resizable-handle {
   display: block;
   position: absolute;
-    font-size: .1px;
   z-index: 9999;
+  font-size: .1px;
 }
 
 .ui-resizable-disabled .ui-resizable-handle,
@@ -631,7 +631,7 @@
   }
 
   .ui-accordion-header-active {
-        border-bottom: 0 !important;
+    border-bottom: 0 !important; // scss-lint:disable ImportantRule
   }
 
   .ui-accordion-header a {
@@ -660,9 +660,9 @@
     margin-top: -2px;
     margin-bottom: 2px;
     padding: 1em 2.2em;
-        border-top: 0;
     overflow: auto;
     zoom: 1;
+    border-top: 0;
   }
 
   .ui-accordion-content-active {
@@ -694,11 +694,11 @@
 ----------------------------------*/
 
 .ui-menu {
+  @include nice-shadow(2);
   display: block;
   margin: 0;
   padding: 2px;
   list-style: none;
-    @include nice-shadow(2);
 
   .ui-menu {
     margin-top: -3px;
@@ -731,11 +731,11 @@
   position: relative;
   margin-right: .1em;
   padding: 0;
-    text-align: center;
-    text-decoration: none !important;
-    cursor: pointer;
   overflow: visible;
   zoom: 1;
+  text-align: center;
+  text-decoration: none !important; // scss-lint:disable ImportantRule
+  cursor: pointer;
 }
 
 /* the overflow property removes extra width in IE */
@@ -881,10 +881,10 @@ button.ui-button::-moz-focus-inner {
   .ui-dialog-content {
     position: relative;
     padding: .5em 1em;
-        border: 0 none;
-        background: none;
     overflow: auto;
     zoom: 1;
+    border: 0 none;
+    background: none;
   }
 
   .ui-dialog-buttonpane {
@@ -899,9 +899,9 @@ button.ui-button::-moz-focus-inner {
       margin: .5em .4em .5em 0;
       padding: .2em .6em .3em;
       float: right;
+      overflow: visible;
       line-height: 1.4em;
       cursor: pointer;
-            overflow: visible;
     }
   }
 
@@ -926,19 +926,19 @@ button.ui-button::-moz-focus-inner {
 
   .ui-slider-handle {
     position: absolute;
+    z-index: 2;
     width: 1.2em;
     height: 1.2em;
     cursor: default;
-        z-index: 2;
   }
 
   .ui-slider-range {
     display: block;
     position: absolute;
+    z-index: 1;
     border: 0 none;
     background-position: 0 0;
     font-size: .7em;
-        z-index: 1;
   }
 }
 
@@ -1006,8 +1006,8 @@ button.ui-button::-moz-focus-inner {
       margin: 0 .2em 1px 0;
       padding: 0;
       float: left;
-            border-bottom: 0 !important;
       list-style: none;
+      border-bottom: 0 !important; // scss-lint:disable ImportantRule
       white-space: nowrap;
 
       a {
@@ -1048,7 +1048,7 @@ button.ui-button::-moz-focus-inner {
   }
 
   .ui-tabs-hide {
-        display: none !important;
+    display: none !important; // scss-lint:disable ImportantRule
   }
 }
 
@@ -1060,13 +1060,13 @@ button.ui-button::-moz-focus-inner {
 ----------------------------------*/
 
 .ui-datepicker {
+  @include nice-shadow(3);
   width: 16em;
   padding: .3em .6em .6em;
   border: 0 none;
   background: $body-bg;
   color: $text-color;
   font-size: $font-size-base;
-    @include nice-shadow(3);
 
   .ui-datepicker-header {
     position: relative;
@@ -1081,9 +1081,9 @@ button.ui-button::-moz-focus-inner {
   .ui-state-default {
     border: 1px solid $body-bg;
     background: $body-bg;
+    box-shadow: none;
     color: $component-color;
     font-weight: normal;
-        box-shadow: none;
 
     a,
     a:link,
@@ -1169,8 +1169,8 @@ button.ui-button::-moz-focus-inner {
   table {
     width: 100%;
     margin: 0 0 .4em;
-        font-size: .9em;
     border-collapse: collapse;
+    font-size: .9em;
   }
 
   th {
@@ -1220,8 +1220,8 @@ button.ui-button::-moz-focus-inner {
       margin: .5em .2em .4em;
       padding: .2em .6em .3em;
       float: right;
-            cursor: pointer;
       overflow: visible;
+      cursor: pointer;
 
       &.ui-datepicker-current {
         float: left;
@@ -1251,9 +1251,9 @@ button.ui-button::-moz-focus-inner {
   }
 
   .ui-datepicker-buttonpane {
+    @include clearfix;
     margin: .6em 0 0;
     padding: .6em 0 0;
-        @include clearfix;
 
     button {
       margin: 0;

src/sass/plugins/redmine_backlogs/jquery/jquery.multiselect.scss

@@ -1,4 +1,3 @@
-// scss-lint:disable ImportantRule
 @import "../common";
 
 .ui-multiselect {
@@ -12,13 +11,13 @@
 
 .ui-multiselect-single .ui-multiselect-checkboxes {
   input {
-        position: absolute !important;
-        top: auto !important;
+    position: absolute !important; // scss-lint:disable ImportantRule
+    top: auto !important; // scss-lint:disable ImportantRule
     left: -9999px;
   }
 
   label {
-        padding: 5px !important;
+    padding: 5px !important; // scss-lint:disable ImportantRule
   }
 }
 
@@ -55,12 +54,12 @@
 }
 
 .ui-multiselect-menu {
+  @include nice-shadow(2);
   display: none;
   position: absolute;
+  z-index: 10000;
   padding: 3px;
   text-align: left;
-    z-index: 10000;
-    @include nice-shadow(2);
 }
 
 .ui-multiselect-checkboxes {
@@ -84,7 +83,7 @@
     padding-left: 20px + 6px;
     border: 1px solid transparent;
     cursor: default;
-        @include user-select(none);
+    user-select: none;
 
     input {
       position: relative;
@@ -112,8 +111,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;
 }

src/sass/plugins/redmine_backlogs/jquery/jquery.qtip.scss

@@ -10,16 +10,16 @@
 }
 
 .ui-tooltip-content {
+  @include nice-shadow(2);
   position: relative;
   padding: 10px;
+  overflow: hidden;
   border: 1px solid $tooltip-border;
   background-color: $tooltip-bg;
   color: $tooltip-text;
   font-size: $font-size-list;
   text-align: left;
   word-wrap: break-word;
-    @include nice-shadow(2);
-    overflow: hidden;
 }
 
 .ui-tooltip-tip {
@@ -29,9 +29,9 @@
 
 .ui-tooltip-tip {
   position: absolute;
+  z-index: 10;
   margin: 0 auto;
+  overflow: hidden;
   border: 0 none;
   background: transparent;
-    overflow: hidden;
-    z-index: 10;
 }

src/sass/plugins/redmine_backlogs/master_backlog.scss

@@ -1,4 +1,3 @@
-// scss-lint:disable ImportantRule
 @import "common";
 
 $header-line-height:            floor($line-height-computed * 1.5);
@@ -23,7 +22,7 @@ $story-sp-input-width:          50px;
     background-color: $background;
     color: $color;
 
-        &:before {
+    &::before {
       color: mix($color, $background, 50%);
     }
 
@@ -38,21 +37,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 +88,8 @@ $story-sp-input-width:          50px;
 }
 
 
-/**
- * Fixed-Fluid-Fixed layout
- */
+//== Fixed-Fluid-Fixed layout
+//
 
 .fff-wrapmiddle {
   width: 100%;
@@ -146,28 +141,26 @@ $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,
   .backlog {
+    @include nice-shadow(1);
     display: block;
     position: relative;
     margin: 0 0 ($padding-side / 2);
     border-radius: $border-radius-large $border-radius-large 0 0;
     background-color: $gray-lightest;
-        @include nice-shadow(1);
 
     @media screen and (min-width: $screen-md-min) {
       margin: 0 0 $padding-side;
@@ -176,9 +169,8 @@ $story-sp-input-width:          50px;
 }
 
 
-/**
- * Backlog header
- */
+//== Backlog header
+//
 
 #backlogs_container {
   .header {
@@ -197,9 +189,9 @@ $story-sp-input-width:          50px;
 
       &:focus {
         border-color: lighten($header-bg, 25%);
-                color: $gray-darkest;
         box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2),
               0 0 0 1px lighten($header-bg, 25%);
+        color: $gray-darkest;
       }
     }
 
@@ -211,8 +203,8 @@ $story-sp-input-width:          50px;
 
     .name {
       padding-left: $padding-base-horizontal;
-            font-weight: $font-weight-bold;
       overflow: hidden;
+      font-weight: $font-weight-bold;
     }
 
     .date {
@@ -255,13 +247,13 @@ $story-sp-input-width:          50px;
       .editors {
         display: block;
         position: absolute;
+        z-index: 1;
         top: 0;
         left: 0;
         width: 100%;
         padding-top: $editor-padding;
         border-radius: $border-radius-large $border-radius-large 0 0;
         background-color: $header-bg;
-                z-index: 1;
       }
 
       label,
@@ -287,7 +279,7 @@ $story-sp-input-width:          50px;
         $name-width-minus: $header-right-width-wider + 35px;
 
         position: relative;
-                width: calc(100% - #{$name-width-minus}) !important;
+        width: calc(100% - #{$name-width-minus}) !important; // scss-lint:disable ImportantRule
         min-width: 128px;
         margin-left: $header-line-height - 2px;
         float: left;
@@ -307,20 +299,20 @@ $story-sp-input-width:          50px;
     .menu {
       position: relative;
       height: $header-line-height;
+      overflow: visible;
+      transition: background-color 0s .1s, border-color 0s .1s;
       border-right: 1px solid #888;
       border-bottom: 1px solid $header-bg;
       border-radius: ($border-radius-large - 1px) 0 0;
       font-size: $font-size-small;
       line-height: $line-height-base;
       cursor: pointer;
-            overflow: visible;
-            @include transition(background-color 0s .1s, border-color 0s .1s);
 
       &:hover {
+        z-index: 1000;
+        transition: background-color 0s 0s, border-color 0s 0s;
         border-color: $body-bg;
         background-color: $body-bg;
-                z-index: 1000;
-                @include transition(background-color 0s 0s, border-color 0s 0s);
       }
 
       .icon {
@@ -333,20 +325,20 @@ $story-sp-input-width:          50px;
       }
 
       ul {
+        visibility: hidden;
         position: absolute;
+        z-index: 999;
         top: $header-line-height + 1px;
         left: -1px;
         margin: 0;
         padding: $padding-small-vertical 0;
+        list-style: none;
+        transition: visibility 0s .1s;
         border: 1px solid $header-bg;
         border-top-width: 0;
         border-radius: 0 0 $border-radius-base $border-radius-base;
         background-color: $body-bg;
-                list-style: none;
         box-shadow: 0 2px 1px rgba(#000, .1);
-                visibility: hidden;
-                z-index: 999;
-                @include transition(visibility 0s .1s);
 
         a {
           color: $gray-darker;
@@ -355,7 +347,7 @@ $story-sp-input-width:          50px;
 
       &:hover .items {
         visibility: visible;
-                @include transition(visibility 0s 0s);
+        transition: visibility 0s 0s;
       }
 
       .item {
@@ -394,7 +386,7 @@ $story-sp-input-width:          50px;
 
           ul {
             visibility: visible;
-                        @include transition(visibility 0s 0s);
+            transition: visibility 0s 0s;
           }
         }
       }
@@ -407,9 +399,9 @@ $story-sp-input-width:          50px;
 
   .close_sprint {
     float: left;
+    overflow: hidden;
     color: $header-link;
     white-space: nowrap;
-        overflow: hidden;
   }
 
   .closedbacklog {
@@ -419,15 +411,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 {
@@ -435,8 +425,8 @@ $story-sp-input-width:          50px;
     min-height: ($line-height-computed + $table-condensed-cell-padding * 2);
     margin: 0;
     padding: 0;
-        font-size: $font-size-list;
     list-style: none;
+    font-size: $font-size-list;
 
     .v {
       display: none;
@@ -501,7 +491,8 @@ $story-sp-input-width:          50px;
           font-weight: $font-weight-bold;
           text-align: right;
 
-                    &:before {
+          &::before {
+            content: "#";
             margin-left: -1em;
             @if $color-trackers {
               color: mix($tracker-default-text, $tracker-default-bg, 50%);
@@ -509,7 +500,6 @@ $story-sp-input-width:          50px;
               color: $gray-light;
             }
             font-weight: normal;
-                        content: "#";
           }
 
           &:hover {
@@ -525,7 +515,7 @@ $story-sp-input-width:          50px;
     }
 
     .fff-left > .project,
-        .fff-wrapmiddle > .subject,
+    .fff-wrapmiddle > .fff-middle,
     .fff-right > .status_id,
     .fff-right > .story_points {
       min-height: floor(.92 * $font-size-base * $line-height-base);
@@ -537,18 +527,21 @@ $story-sp-input-width:          50px;
       width: $story-project-width;
       padding: $table-condensed-cell-padding 0 $table-condensed-cell-padding $table-condensed-cell-padding;
       float: left;
+      overflow: hidden;
       text-align: center;
       white-space: nowrap;
-            overflow: hidden;
 
       .t {
         overflow: hidden;
       }
     }
 
+    .fff-middle {
+      padding: $table-condensed-cell-padding 0;
+    }
+
     .subject {
       @include text-overflow;
-            padding: $table-condensed-cell-padding 0;
     }
 
     &.closed .subject {
@@ -599,18 +592,18 @@ $story-sp-input-width:          50px;
 
         &:focus {
           border-color: darken($highlight-border, 15%);
-                    color: $gray-darkest;
           box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075),
                 0 0 5px rgba(darken($highlight-border, 15%), .5);
+          color: $gray-darkest;
         }
       }
 
       .editors {
+        @include clearfix;
         display: block;
         margin-left: $story-tracker-input-width + 5px;
         padding: $table-condensed-cell-padding 0;
         text-align: right;
-                @include clearfix;
 
         label {
           display: none;
@@ -650,11 +643,11 @@ $story-sp-input-width:          50px;
         &.subject {
           $subject-width-minus: $story-status-input-width + $story-sp-input-width + 5px * 2;
 
-                    width: calc(100% - #{$subject-width-minus}) !important;
+          width: calc(100% - #{$subject-width-minus}) !important; // scss-lint:disable ImportantRule
           height: 60px;
           float: left;
-                    white-space: normal;
           overflow: auto;
+          white-space: normal;
         }
 
         &.category_id {
@@ -686,14 +679,11 @@ $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;
     overflow: show;
+    white-space: normal;
   }
 
   @if $color-trackers {
@@ -708,9 +698,8 @@ $story-sp-input-width:          50px;
 }
 
 
-/**
- * dialog
- */
+//== Dialog
+//
 
 .ui-dialog {
   .ui-dialog-titlebar-close {
@@ -723,8 +712,8 @@ $story-sp-input-width:          50px;
   }
 
   &.ui-widget-content {
-        border: 0 none;
     @include nice-shadow(5);
+    border: 0 none;
   }
 
   .ui-dialog-buttonpane.ui-widget-content {
@@ -750,9 +739,8 @@ $story-sp-input-width:          50px;
 }
 
 
-/**
- * In-place Sprint Editor
- */
+//== In-place Sprint Editor
+//
 
 #backlogs_container {
 
@@ -764,16 +752,18 @@ $story-sp-input-width:          50px;
     white-space: nowrap;
 
     a {
+      @include button-size($input-padding-vertical, $input-padding-horizontal, $font-size-base, $line-height-base, $border-radius-base);
       display: inline-block;
       margin-bottom: 0;
+      transition: background-color ease-in-out .07s,
+                  border-color ease-in-out .07s,
+                  box-shadow ease-in-out .07s;
       border: 1px solid;
       font-weight: $btn-font-weight;
       text-align: center;
       white-space: nowrap;
       cursor: pointer;
-            @include button-size($input-padding-vertical, $input-padding-horizontal, $font-size-base, $line-height-base, $border-radius-base);
-            @include user-select(none);
-            @include transition(background-color ease-in-out .07s, border-color ease-in-out .07s, box-shadow ease-in-out .07s);
+      user-select: none;
 
       &.save {
         @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
@@ -795,7 +785,9 @@ $story-sp-input-width:          50px;
   }
 }
 
-/* In-place Story Editor */
+
+//== In-place Story Editor
+//
 
 .debug {
   .story {
@@ -823,18 +815,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;
+}

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,15 +58,17 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
   padding: 5px;
 }
 
-/* status labels */
+
+//== Status labels
+//
 
 #board_header {
   position: absolute;
+  z-index: 200;
   margin-right: 10px;
   margin-bottom: 0;
   border: 1px solid darken($header-bg, 5%);
   background-color: $header-bg;
-    z-index: 200;
 
   td {
     height: 20px;
@@ -144,12 +146,12 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
   .id {
     margin-bottom: 5px;
     padding: 0 3px;
+    overflow: hidden;
     border-radius: $border-radius-base;
+    opacity: .8;
     background-color: $body-bg;
     font-size: .9em;
     line-height: 16px;
-        opacity: .8;
-        overflow: hidden;
 
     a,
     .remaininghours {
@@ -172,8 +174,8 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
   .subject {
     height: $issue-height * .6;
     padding: 2px;
-        line-height: 1.3;
     overflow: hidden;
+    line-height: 1.3;
   }
 
   &.closed .subject {
@@ -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,
@@ -241,14 +245,14 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
   .id {
     margin-bottom: 5px;
     padding: 0 3px;
+    overflow: hidden;
     border-radius: $border-radius-base;
+    opacity: .8;
     background-color: $body-bg;
     font-size: $font-size-small-px;
     font-weight: $font-weight-bold;
     line-height: 16px;
     text-align: right;
-        opacity: .8;
-        overflow: hidden;
 
     .v {
       display: none;
@@ -280,9 +284,9 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
       margin-top: 2px;
       padding: 2px;
       padding-top: 0;
+      overflow: hidden;
       font-size: 9px;
       white-space: nowrap;
-            overflow: hidden;
     }
 
     .v {
@@ -361,7 +365,9 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
   }
 }
 
-/* dialog */
+
+//== Dialog
+//
 
 .rb_editor_dialog.ui-dialog {
   .ui-dialog-titlebar-close {
@@ -369,9 +375,9 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
   }
 
   .ui-widget-header {
+    opacity: .5;
     background: none;
     background-color: #fff;
-        opacity: .5;
   }
 
   .ui-dialog-title {
@@ -380,9 +386,9 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
   }
 
   &.ui-widget-content {
+    @include nice-shadow(5);
     border: 0 none;
     background: none;
-        @include nice-shadow(5);
   }
 
   .ui-dialog-buttonpane.ui-widget-content {
@@ -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 {