Update readme for release v1.8.0

Use standardjs
Small correction for changeset lists
2016-11-20 23:39:56 +00:00 · 2016-11-20 23:31:10 +00:00 · 2016-11-20 23:27:58 +00:00 · 2016-11-20 23:04:32 +00:00 · 2016-11-20 21:07:06 +00:00 · 2016-11-20 20:19:51 +00:00
70 changed files with 8883 additions and 8904 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
--- a/.scss-lint.yml
+++ b/.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
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,40 +1,50 @@
 module.exports = function (grunt) {
-
  grunt.initConfig({
-    src: "src/",
+    src: 'src/',

    sass: {
      options: {
        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 +58,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'])
+}
--- a/README.md
+++ b/README.md
@@ -2,7 +2,11 @@

 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?style=flat-square) [![Release](https://img.shields.io/github/release/mrliptontea/PurpleMine2.svg?style=flat-square)](https://github.com/mrliptontea/PurpleMine2/releases) [![Issues](https://img.shields.io/github/issues/mrliptontea/PurpleMine2.svg?style=flat-square)](https://github.com/mrliptontea/PurpleMine2/issues) [![JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)
+
+---
+
+![Screenshot](https://github.com/mrliptontea/PurpleMine2/raw/master/screenshots/issues-list.png)

 Compatible with Redmine 2.5+ and browsers: IE10+/Edge, latest Firefox and Google Chrome (others were not tested).

@@ -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.

@@ -56,6 +60,33 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe

 ## Changelog

+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
@@ -109,7 +140,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):

--- a/javascripts/theme.js
+++ b/javascripts/theme.js
--- a/package.json
+++ b/package.json
@@ -17,10 +17,24 @@
    "url": "https://github.com/mrliptontea/PurpleMine2/issues"
  },
  "homepage": "https://github.com/mrliptontea/PurpleMine2",
-  "devDependencies": {
-    "grunt": "^0.4.5",
-    "grunt-contrib-uglify": "^0.9.1",
-    "grunt-contrib-watch": "^0.6.1",
+  "scripts": {
+    "lint": "standard && scss-lint"
+  },
+  "dependencies": {
+    "autoprefixer": "^6.5.3",
+    "grunt": "^1.0.1",
+    "grunt-contrib-uglify": "^2.0.0",
+    "grunt-contrib-watch": "^1.0.0",
+    "grunt-postcss": "^0.8.0",
    "grunt-sass": "^1.0.0"
+  },
+  "devDependencies": {
+    "standard": "^8.5.0"
+  },
+  "standard": {
+    "globals": [ "$", "localStorage" ],
+    "ignore": [
+      "/javascripts"
+    ]
  }
 }
--- a/plugins/redmine_backlogs/global.css
+++ b/plugins/redmine_backlogs/global.css
--- a/plugins/redmine_backlogs/jquery/jquery-ui.css
+++ b/plugins/redmine_backlogs/jquery/jquery-ui.css
--- a/plugins/redmine_backlogs/jquery/jquery.multiselect.css
+++ b/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{box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);display:none;position:absolute;padding:3px;text-align:left;z-index:10000}.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}
--- a/plugins/redmine_backlogs/jquery/jquery.qtip.css
+++ b/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{box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);position:relative;padding:10px;border:1px solid #ccc;background-color:#fff;color:#555;font-size:.92em;text-align:left;word-wrap:break-word;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}
--- a/plugins/redmine_backlogs/master_backlog.css
+++ b/plugins/redmine_backlogs/master_backlog.css
--- a/plugins/redmine_backlogs/taskboard.css
+++ b/plugins/redmine_backlogs/taskboard.css
--- a/src/javascripts/modules/HistoryTabs.js
+++ b/src/javascripts/modules/HistoryTabs.js
@@ -1,98 +1,87 @@
-var PurpleMine = PurpleMine || {};
+var PurpleMine = PurpleMine || {}

-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'
    },
    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'
    }
  }

-    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
+}())
--- a/src/javascripts/modules/MenuCollapse.js
+++ b/src/javascripts/modules/MenuCollapse.js
@@ -1,142 +1,116 @@
-var PurpleMine = PurpleMine || {};
+var PurpleMine = PurpleMine || {}

-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'
    },
    pl: {
-            topMenuToggler : "Zwiń/rozwiń górne menu",
-            mainMenuToggler: "Zwiń/rozwiń główne menu"
+      topMenuToggler: 'Zwiń/rozwiń górne menu'
    }
-    };
-
-    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
+}())
--- a/src/javascripts/modules/RevisionGraph.js
+++ b/src/javascripts/modules/RevisionGraph.js
@@ -1,157 +1,144 @@
-var PurpleMine = PurpleMine || {};
+var PurpleMine = PurpleMine || {}
 /* 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()
  }
-});
-
+})
--- a/src/javascripts/modules/SidebarToggler.js
+++ b/src/javascripts/modules/SidebarToggler.js
@@ -1,154 +1,135 @@
-var PurpleMine = PurpleMine || {};
+var PurpleMine = PurpleMine || {}

-PurpleMine.SidebarToggler = (function()
-{
-    "use strict";
+PurpleMine.SidebarToggler = (function () {
+  'use strict'

-    var self;
+  var instance
  var translations = {
    en: {
-            toggler: "Toggle sidebar"
+      toggler: 'Toggle sidebar'
    },
    pl: {
-            toggler: "Pokaż/ukryj panel boczny"
+      toggler: 'Pokaż/ukryj panel boczny'
    }
-    };
-
-    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') {
+      $('#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
+}())
--- a/src/javascripts/theme.js
+++ b/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()
+})
--- a/src/sass/_mixins.scss
+++ b/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";
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -21,7 +21,6 @@ $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
@@ -249,6 +248,7 @@ $diff-in-bg-light:              rgba($diff-in-bg, .3) !default;

 //== Journal changes
 //
+
 $journal-old-value-color:       #430 !default;
 $journal-old-value-bg:          rgba(#ffeaaa, .3) !default;
 $journal-new-value-color:       #350 !default;
@@ -350,6 +350,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 +359,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 +369,21 @@ $pagination-padding-vertical:   $btn-padding-vertical !default;
 $pagination-padding-horizontal: 10px !default;

 $pagination-color:              $link-color !default;
-$pagination-bg:                 #fff !default;
+$pagination-bg:                 #f9f9f9 !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 +444,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 +482,7 @@ $issue-attribute-padding-h:     5px !default;

 //== Speech "bubbles"
 //
+
 $bubble-gravatar-size:          24px !default;
 $bubble-gravatar-space:         12px !default;
 $bubble-padding-vertical:       8px !default;
@@ -499,7 +508,6 @@ $screen-sm-max:                 ($screen-md-min - 1) !default;
 $screen-md-max:                 ($screen-lg-min - 1) !default;

 $top-menu-collapse-breakpoint:  $screen-lg-min !default;
-$main-menu-collapse-breakpoint: $screen-lg-min !default;


 //== Content widths
--- a/src/sass/application.scss
+++ b/src/sass/application.scss
@@ -2,6 +2,8 @@
@import "mixins";

@import "lib/normalize";
+@import "lib/font-awesome";
+

 //== Redmine's core elements
 //
--- a/src/sass/components/_admin.scss
+++ b/src/sass/components/_admin.scss
@@ -32,9 +32,8 @@
 }


-/**
- * Groups
- */
+//== Groups
+//

 table.members,
 table.memberships {
@@ -44,9 +43,8 @@ table.memberships {
 }


-/**
- * Permissions
- */
+//== Permissions
+//

 table.permissions {
  td.role {
@@ -58,9 +56,8 @@ table.permissions {
 }


-/**
- * Workflows
- */
+//== Workflows
+//

 table.transitions {
  td.enabled {
@@ -88,9 +85,8 @@ table.fields_permissions {
 }


-/**
- * Enumerations
- */
+//== Enumerations
+//

 .controller-enumerations.action-index {
  #content {
@@ -106,18 +102,16 @@ table.fields_permissions {
 }


-/**
- * Settings labels
- */
+//== Settings labels
+//

 fieldset.settings label {
  display: block;
 }


-/**
- * Settings -> Notifications
- */
+//== Settings -> Notifications
+//

 fieldset#notified_events {
  .parent {
@@ -126,9 +120,8 @@ fieldset#notified_events {
 }


-/**
- * Settings -> Repositories
- */
+//== Settings -> Repositories
+//

 .settings.enabled_scm {
  table {
--- a/src/sass/components/_buttons.scss
+++ b/src/sass/components/_buttons.scss
@@ -5,20 +5,23 @@
 input[type="button"],
 input[type="submit"],
 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;
  }

@@ -31,14 +34,13 @@ button {
  fieldset[disabled] & {
    pointer-events: none; // Future-proof disabling of clicks
    box-shadow: none;
-        @include opacity(.65);
+    opacity: .65;
  }
 }


-/**
- * Form buttons layout
- */
+//== Form buttons layout
+//

 form {
  input[type="submit"] {
@@ -50,26 +52,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,14 +83,77 @@ form[action*="repository/diff"] {
 }


-/**
- * Query builder buttons
- */
+//== Button links
+//
+
+p.buttons,
+.other-formats > span,
+#wiki_add_attachment > p {
+  > a {
+    display: inline-block;
+    padding: $input-padding-vertical $input-padding-horizontal;
+    border: 1px solid $pagination-border;
+    border-radius: $input-border-radius;
+    background-color: $pagination-bg;
+    text-shadow: 1px 1px 0 #fff;
+
+    &: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);
+    }
+
+    @if $use-font-awesome {
+      &.icon {
+        padding-left: 20px + $padding-small-vertical + $input-padding-vertical;
+      }
+    } @else {
+      &.icon,
+      &.atom {
+        padding-left: 20px + $input-padding-vertical;
+        background-position: $padding-small-vertical 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
  }

  .buttons {
@@ -100,30 +164,29 @@ form[action*="repository/diff"] {
      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);
+  user-select: none;
+  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); // scss-lint:disable DeclarationOrder
 }

 a[data-expands] {
@@ -131,6 +194,12 @@ a[data-expands] {
  margin-right: 10px;
  padding: 10px;

+  > .toggle-multiselect {
+    padding: 0;
+    border: 0 none;
+    background: transparent;
+  }
+
  img {
    display: none;
  }
--- a/src/sass/components/_coderay.scss
+++ b/src/sass/components/_coderay.scss
@@ -302,36 +302,13 @@

  .insert {
    background: hsla(120, 100%, 50%, .12);
-    }
-
-    .delete {
-        background: hsla(0, 100%, 50%, .12);
-    }
-
-    .change {
-        background: #007;
-        color: #bbf;
-    }
-
-    .head {
-        background: #505;
-        color: #f8f;
-
-        .filename {
-            color: #fff;
-        }
-    }
-
-    .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;
+    }
+  }
 }
--- a/src/sass/components/_content.scss
+++ b/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,14 @@
 // --------------------------------------------------

 #sidebar {
-    // scss-lint:disable VendorPrefix
  padding: $padding-side $sidebar-padding-horizontal;

  @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 {
@@ -77,9 +64,6 @@
    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;
--- a/src/sass/components/_elements.scss
+++ b/src/sass/components/_elements.scss
@@ -3,78 +3,43 @@
 // --------------------------------------------------


-/**
- * 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 {
    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);
  }
 }

@@ -82,43 +47,40 @@ a.collapsible.collapsed,
  fieldset.collapsible {
    min-height: $line-height-computed;
    max-height: 2500px; // should be enough with all the possible filters
+    transition: max-height $collapsible-animation-time ease-out;
    overflow: hidden;
-        @include transition(max-height $collapsible-animation-time ease-out);

    > div {
-            // scss-lint:disable ImportantRule
-            display: block !important;
+      display: block !important; // scss-lint:disable ImportantRule
+      transition: visibility 0s 0s, opacity $collapsible-animation-time;
      opacity: 1;
      visibility: visible;
-            @include transition(visibility 0s 0s, opacity $collapsible-animation-time);
    }

    &.collapsed {
      max-height: 0;
-            @include transition(max-height $collapsible-animation-time);
+      transition: max-height $collapsible-animation-time;

      > div {
+        transition: visibility 0s $collapsible-animation-time, opacity $collapsible-animation-time;
        opacity: 0;
        visibility: hidden;
-                @include transition(visibility 0s $collapsible-animation-time, opacity $collapsible-animation-time);
      }
    }
  }
 }


-/**
- * 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;
@@ -132,10 +94,16 @@ a.collapsible.collapsed,
  }
 }

+.contextual,
+.buttons {
+  > .icon:not(:first-child) {
+    margin-left: $padding-small-vertical;
+  }
+}

-/**
- * Accessibility specific styles
- */
+
+//== Accessibility specific styles
+//

 .hidden-for-sighted {
  position: absolute;
@@ -147,9 +115,8 @@ a.collapsible.collapsed,
 }


-/**
- * Responsive autoscroll
- */
+//== Responsive autoscroll
+//

 .autoscroll {
  overflow-x: auto;
@@ -157,9 +124,8 @@ a.collapsible.collapsed,
 }


-/**
- * Container
- */
+//== Container
+//

 .box {
  margin-bottom: $line-height-computed;
@@ -176,12 +142,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;
@@ -190,7 +164,7 @@ a.collapsible.collapsed,
 .splitcontentleft,
 .splitcontentright {
  width: 50%;
-    @include box-sizing(border-box);
+  box-sizing: border-box;
 }

 .splitcontentleft {
@@ -204,24 +178,22 @@ a.collapsible.collapsed,
 }


-/**
- * Watchers selection list
- */
+//== Watchers selection list
+//

 #users_for_watcher {
  height: 200px;
  overflow: auto;

  label {
-        display: block;
    @include checkbox;
+    display: block;
  }
 }


-/**
- * Watchers list
- */
+//== Watchers list
+//

 #watchers {
  select {
@@ -231,9 +203,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;
@@ -268,9 +240,8 @@ a.collapsible.collapsed,
 }


-/**
- * Subtitle paragraph (can be seen on activity list)
- */
+//== Subtitle paragraph (can be seen on activity list)
+//

 p.subtitle {
  margin-top: ($line-height-computed / -2);
@@ -279,18 +250,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;
@@ -321,15 +282,14 @@ p.subtitle {
  }

  &.ui-sortable-placeholder {
-        // scss-lint:disable ImportantRule
    outline: 1px dashed $highlight-border;
    background: $highlight-bg;
-        visibility: visible !important;
+    visibility: visible !important; // scss-lint:disable ImportantRule
  }

  &.ui-sortable-helper {
-        background: $body-bg;
    @include nice-shadow(4);
+    background: $body-bg;
  }
 }

@@ -353,9 +313,9 @@ a.close-icon {
 }


-/**
- * Resetting font for SCM (repository files)
- */
+//== Resetting font for SCM (repository files)
+//
+
 #content table.filecontent {
  width: 100%;
  background: $body-bg;
@@ -428,9 +388,8 @@ a.close-icon {
 }


-/**
- * Projects list
- */
+//== Projects list
+//

 ul.projects {
  padding-left: $padding-side;
@@ -484,9 +443,8 @@ ul.projects {
 }


-/**
- * Time report
- */
+//== Time report
+//

 #time-report {
  th {
@@ -531,9 +489,8 @@ ul.projects {
 }


-/**
- * Version issue list and page layout
- */
+//== Version issue list and page layout
+//

 div#roadmap {
  .related-issues {
@@ -587,22 +544,22 @@ 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;
  top: 50%;
  left: 50%;
@@ -614,7 +571,6 @@ div#version-summary {
  color: $highlight-text;
  font-weight: $font-weight-bold;
  text-align: center;
-    @include nice-shadow(3);
  opacity: .9;
  z-index: 100;

@@ -628,9 +584,8 @@ div#version-summary {
 }


-/**
- * Boards (forum)
- */
+//== Boards (forum)
+//

 tr.message {
  &.locked {
@@ -672,10 +627,15 @@ table.boards {
  }
 }

+div.table-list.boards {
+  .table-list-cell.name {
+    width: 30%;
+  }
+}

-/**
- * Topic page
- */
+
+//== Topic page
+//

 .controller-messages.action-show {
  h2 {
@@ -738,8 +698,8 @@ table.boards {
      > h4 {
        position: relative;

-                &:before,
-                &:after {
+        &::before,
+        &::after {
          display: block;
          position: absolute;
          top: 9px;
@@ -753,14 +713,14 @@ table.boards {
          pointer-events: none;
        }

-                &:after {
+        &::after {
          margin-top: 1px;
          margin-left: 2px;
          border-width: 6px;
          border-right-color: $panel-bg;
        }

-                &:before {
+        &::before {
          border-width: 7px;
          border-right-color: $panel-border;
        }
@@ -780,9 +740,31 @@ table.boards {
 }


-/**
- * News comments
- */
+//== News
+//
+
+.news-article {
+  margin-bottom: $line-height-computed;
+
+  header {
+    h3 {
+      margin-bottom: .3em;
+      line-height: 1.2;
+
+      > a {
+        font-weight: $font-weight-bold;
+      }
+    }
+  }
+}
+
+.author .user {
+  font-weight: $font-weight-bold;
+}
+
+
+//== News comments
+//

 #comments {
  > h4 {
@@ -800,9 +782,8 @@ table.boards {
 }


-/**
- * Diff
- */
+//== Diff
+//

 .text-diff {
  margin-bottom: $line-height-computed;
@@ -830,9 +811,8 @@ table.boards {
 }


-/**
- * Repository view
- */
+//== Repository view
+//

 .revision-info {
  margin-bottom: $line-height-computed;
@@ -904,12 +884,6 @@ tr.changeset {
  }
 }

-.revision-graph {
-    circle {
-        // @include translate(0, $table-cell-padding - 1px);
-    }
-}
-
 #content #changes-legend {
  font-size: 1em;

@@ -935,22 +909,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); }
  }

--- a/src/sass/components/_flash.scss
+++ b/src/sass/components/_flash.scss
@@ -17,7 +17,7 @@
  @if $use-font-awesome {
    @extend %fa-icon;

-        &:before {
+    &::before {
      margin-left: -(8px + 16px);
      float: left;
      line-height: $line-height-computed;
@@ -27,9 +27,7 @@
    background-position: $padding-large-horizontal 50%;
  }

-    p:last-child,
-    ol:last-child,
-    ul:last-child {
+  >:last-child {
    margin-bottom: 0;
  }
 }
@@ -40,11 +38,15 @@
  border-color: $border;

  @if $use-font-awesome {
-        @if     $icon == "true"        { $icon: $fa-var-check; }
-        @elseif $icon == "warning"     { $icon: $fa-var-warning; }
-        @elseif $icon == "exclamation" { $icon: $fa-var-exclamation-circle; }
+    @if $icon == "true" {
+      $icon: $fa-var-check;
+    } @elseif $icon == "warning" {
+      $icon: $fa-var-warning;
+    } @elseif $icon == "exclamation" {
+      $icon: $fa-var-exclamation-circle;
+    }

-        &:before {
+    &::before {
      content: $icon;
    }
  } @else {
@@ -77,7 +79,7 @@
  text-align: center;

  @if $use-font-awesome {
-        &:before {
+    &::before {
      margin-left: 0;
      float: none;
    }
--- a/src/sass/components/_forms.scss
+++ b/src/sass/components/_forms.scss
@@ -19,12 +19,11 @@ textarea {
  font-family: inherit;
  font-size: $font-size-base;
  line-height: $line-height-base;
-    @include box-sizing(border-box);
+  box-sizing: border-box;
 }

 select,
 textarea,
-/*
 input[type="datetime"],
 input[type="datetime-local"],
 input[type="date"],
@@ -34,22 +33,21 @@ 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"] {
+  @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();

  &[disabled],
  &[readonly],
@@ -64,6 +62,11 @@ input[type="password"] {
 textarea {
  resize: vertical;
  height: auto;
+
+  &.text_cf {
+    width: 100%;
+    resize: vertical;
+  }
 }

 input[type="search"] {
@@ -86,9 +89,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 +101,12 @@ input.autocomplete {
    }
  }

+  &.string_cf,
+  &.link_cf {
+    width: 100%;
+  }
+}
+
 select {
  &[multiple],
  &[size] {
@@ -110,15 +120,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 +144,7 @@ select {
    }

    option,
-        optgroup:before {
+    optgroup::before {
      padding: $input-padding-vertical $input-padding-horizontal;
      border-bottom: 1px dotted $gray-lighter;
    }
@@ -139,6 +157,7 @@ select {
 }

 // Google Chrome and Safari
+
@supports (-webkit-appearance: none) {
  select[multiple] {
    padding: 0;
@@ -156,16 +175,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 +193,8 @@ legend {
 }


-/**
- * Required fields' asterisk
- */
+//== Required fields' asterisk
+//

 span.required {
  position: relative;
@@ -189,9 +207,8 @@ span.required {
 }


-/**
- * Field's hint
- */
+//== Field's hint
+//

 em.info {
  display: block;
@@ -202,9 +219,9 @@ em.info {
 }


-/**
- * Wiki editor
- */
+//== Wiki editor
+//
+
 .wiki-edit {
  color: $wiki-text;
  font-family: $font-family-monospace;
@@ -212,9 +229,8 @@ em.info {
 }


-/**
- * Tabular forms
- */
+//== Tabular forms
+//

 .tabular {
  &.settings {
@@ -229,10 +245,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 +284,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 +301,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 +318,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 +354,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 checkbox;
  display: block;
  margin-bottom: $line-height-computed / 2;
-    @include checkbox;
 }


-/**
- * Input sizes
- */
+//== Input sizes
+//

 .wiki-edit,
 #principal_search,
@@ -354,23 +384,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,18 +402,28 @@ 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;
+
+  ~ p {
+    margin-bottom: 0;
+  }
+}
+
+
+//== Attachments
+//

 #attachments_fields {
  > span {
@@ -412,14 +435,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 +467,8 @@ select.bool_cf {
 }


-/**
- * Issue form elements
- */
+//== Issue form elements
+//

 #issue-form {
  fieldset {
@@ -458,9 +480,7 @@ select.bool_cf {
      }
    }
  }
-}

-#issue-form {
  .splitcontentleft,
  .splitcontentright {
    width: 100%;
@@ -497,15 +517,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;
@@ -525,24 +545,21 @@ select.bool_cf {
    display: block;
  }

-    // scss-lint:disable VendorPrefix
  #watchers_inputs {
    display: block;
    max-width: 64em;
    margin-top: $input-padding-vertical + 1px;
    margin-bottom: $line-height-computed / 2;
-        -webkit-columns: 18em 3;
-           -moz-columns: 18em 3;
    columns: 18em 3;
    overflow: auto;
  }

  label.floating {
+    @include checkbox;
    display: block;
    width: auto;
    margin: 0;
    float: none;
-        @include checkbox;

    input[type="checkbox"] {
      top: -1px;
@@ -551,9 +568,8 @@ select.bool_cf {
 }


-/**
- * Custom logic (boolean) field displayed as radio buttons
- */
+//== Custom logic (boolean) field displayed as radio buttons
+//

 .check_box_group {
  display: block;
@@ -571,11 +587,11 @@ select.bool_cf {

  &.bool_cf {
    label {
+      @extend %clearfix;
      display: inline-block;
      margin-right: 10px;
      padding-left: 20px;
-            @include user-select(none);
-            @extend %clearfix;
+      user-select: none;

      input[type="checkbox"],
      input[type="radio"] {
@@ -588,9 +604,8 @@ select.bool_cf {
 }


-/**
- * Filters
- */
+//== Filters
+//

 fieldset#filters {
  table {
@@ -599,6 +614,10 @@ fieldset#filters {
    }
  }

+  .add-filter {
+    text-align: right;
+  }
+
  td {
    &.field {
      min-width: 180px;
@@ -624,16 +643,22 @@ 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;
+  }
+}
+
+#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;
--- a/src/sass/components/_gantt.scss
+++ b/src/sass/components/_gantt.scss
@@ -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;
-        }
-    }
 }
--- a/src/sass/components/_gravatar.scss
+++ b/src/sass/components/_gravatar.scss
@@ -18,7 +18,8 @@ img.gravatar {
 }


-// For Administration -> /users
+//== Administration -> /users
+//

 .username img.gravatar {
  position: relative;
@@ -27,7 +28,9 @@ img.gravatar {
  vertical-align: top;
 }

-/* Used on 12px Gravatar img tags without the icon background */
+//== Gravatar
+//   Used on 12px Gravatar img tags without the icon background
+
 .icon-gravatar {
  margin-right: 5px;
  float: left;
--- a/src/sass/components/_icons.scss
+++ b/src/sass/components/_icons.scss
--- a/src/sass/components/_image-base64.scss
+++ b/src/sass/components/_image-base64.scss
@@ -2,7 +2,7 @@
 // Base64 encoded images
 // --------------------------------------------------

-/* ACI = AutoComplete Indicator */
+// ACI = AutoComplete Indicator
 %image-aci {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAKBAMAAAAnY0GXAAAAD1BMVEUAAACzs7Ozs7Ozs7Ozs7NJvZFvAAAABHRSTlMA5kpJG2qUMwAAABtJREFUCNdjIBMYCkMRDIg4QhBuAUUhKCIPAAAlaQNk5qF21gAAAABJRU5ErkJggg==);
 }
--- a/src/sass/components/_issue.scss
+++ b/src/sass/components/_issue.scss
@@ -12,8 +12,7 @@
    color: $issue-text;
    word-wrap: break-word;

-        @if $use-gravatars
-        {
+    @if $use-gravatars {
      > img.gravatar {
        width: $issue-gravatar-size;
        height: $issue-gravatar-size;
@@ -22,7 +21,7 @@
        float: left;
      }

-            table img.gravatar {
+      .assigned-to img.gravatar {
        position: relative;
        top: -3px;
        margin-right: 5px;
@@ -128,7 +127,8 @@
  }

  @if $color-status {
-        .attributes td.status {
+    .attributes td.status,
+    .attribute.status .value {
      display: inline-block;
      width: auto;
      min-width: 1em;
@@ -143,14 +143,57 @@
      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: $issue-padding (-$issue-padding) (-$issue-padding);
@@ -280,7 +323,7 @@ div.thumbnails {
  &.hide-details {
    .journal,
    .details,
-        .first-of-notes:before {
+    .first-of-notes::before {
      display: none;
    }

@@ -292,7 +335,7 @@ div.thumbnails {
  &.hide-notes {
    .journal,
    .wiki,
-        .first-of-details:before {
+    .first-of-details::before {
      display: none;
    }

@@ -310,7 +353,7 @@ div.thumbnails {
    margin-left: $bubble-gravatar-size + $bubble-gravatar-space;
  }

-    &:before {
+  &::before {
    display: block;
    position: absolute;
    top: -($line-height-computed + 2px);
@@ -322,7 +365,7 @@ div.thumbnails {
    z-index: -1;
  }

-    .tabs + &:before {
+  .tabs + &::before {
    display: none;
  }

@@ -334,7 +377,7 @@ div.thumbnails {
      border-color: darken($issue-border, 25%);

      @if $use-gravatars {
-                h4:before {
+        h4::before {
          border-right-color: darken($issue-border, 25%);
        }
      }
@@ -366,8 +409,8 @@ div.thumbnails {
    h4 {
      position: relative;

-            &:before,
-            &:after {
+      &::before,
+      &::after {
        display: block;
        position: absolute;
        top: 9px;
@@ -381,14 +424,14 @@ div.thumbnails {
        pointer-events: none;
      }

-            &:after {
+      &::after {
        margin-top: 1px;
        margin-left: 2px;
        border-width: 6px;
        border-right-color: $issue-bg;
      }

-            &:before {
+      &::before {
        border-width: 7px;
        border-right-color: $issue-border;
      }
@@ -417,7 +460,7 @@ div.thumbnails {
        margin-bottom: 0;
      }

-            &:before {
+      &::before {
        display: block;
        position: absolute;
        top: 5px;
@@ -435,6 +478,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 +538,7 @@ div.thumbnails {
  > div {
    border-left-color: $brand-warning;

-        h4:before {
+    h4::before {
      border-right-color: $brand-warning;
    }
  }
@@ -538,14 +590,12 @@ span.private {
    }

    > 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;
      }
--- a/src/sass/components/_jquery-ui.scss
+++ b/src/sass/components/_jquery-ui.scss
@@ -3,9 +3,8 @@
 // --------------------------------------------------


-/**
- * Component containers
- */
+//== Component containers
+//

 .ui-widget {
  &,
@@ -19,9 +18,8 @@
 }


-/**
- * Widgets
- */
+//== Widgets
+//

 .ui-widget-content {
  border: 1px solid $panel-border;
@@ -64,9 +62,8 @@
 }


-/**
- * Interaction states
- */
+//== Interaction states
+//

 .ui-state-default,
 .ui-widget-content .ui-state-default,
@@ -134,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,9 +145,8 @@
 }


-/**
- * Dialogs
- */
+//== Dialogs
+//

 .modal {
  background: $body-bg;
@@ -169,9 +164,9 @@

 .ui-dialog {
  &.ui-widget-content {
+    @include nice-shadow(5);
    padding: 3px;
    border: 0 none;
-        @include nice-shadow(5);
  }

  .ui-dialog-content {
@@ -192,9 +187,8 @@
 }


-/**
- * Datepicker
- */
+//== Datepicker
+//

 img.ui-datepicker-trigger {
  margin-left: 4px;
@@ -203,9 +197,9 @@ img.ui-datepicker-trigger {
 }

 .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;
--- a/src/sass/components/_jstoolbar.scss
+++ b/src/sass/components/_jstoolbar.scss
@@ -7,21 +7,7 @@

  .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 +16,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,19 +34,24 @@
      }
    }
  }
+
+  button {
+    margin-bottom: 5px;
+    box-shadow: none;
+    vertical-align: top;
+  }
 }

-@if $use-font-awesome
-{
+@if $use-font-awesome {
  .jstElements {
    %jstb-icon {
+      @include fa-icon;
      padding: 0;
      background: $body-bg;
      background-image: none;
      color: $btn-default-color;
-            @include fa-icon();

-            &:before {
+      &::before {
        text-align: center;
      }
    }
@@ -60,105 +59,106 @@
    .jstb_strong {
      @extend %jstb-icon;

-            &:before { content: $fa-var-bold; }
+      &::before { content: $fa-var-bold; }
    }

    .jstb_em {
      @extend %jstb-icon;

-            &:before { content: $fa-var-italic; }
+      &::before { content: $fa-var-italic; }
    }

    .jstb_ins {
      @extend %jstb-icon;

-            &:before { content: $fa-var-underline; }
+      &::before { content: $fa-var-underline; }
    }

    .jstb_del {
      @extend %jstb-icon;

-            &:before { content: $fa-var-strikethrough; }
+      &::before { content: $fa-var-strikethrough; }
    }

    .jstb_code {
      @extend %jstb-icon;

-            &:before { content: $fa-var-code; }
+      &::before { content: $fa-var-code; }
    }

    .jstb_h1 {
      @extend %jstb-icon;

-            &:before { content: $fa-var-header; }
+      &::before { content: $fa-var-header; }
    }

    .jstb_h2 {
      @extend %jstb-icon;

-            &:before { font-size: .7857em; content: $fa-var-header; }
+      &::before { font-size: .7857em; content: $fa-var-header; }
    }

    .jstb_h3 {
      @extend %jstb-icon;

-            &:before { font-size: .6429em; content: $fa-var-header; }
+      &::before { font-size: .6429em; content: $fa-var-header; }
    }

    .jstb_ul {
      @extend %jstb-icon;

-            &:before { content: $fa-var-list-ul; }
+      &::before { content: $fa-var-list-ul; }
    }

    .jstb_ol {
      @extend %jstb-icon;

-            &:before { content: $fa-var-list-ol; }
+      &::before { content: $fa-var-list-ol; }
    }

    .jstb_bq {
      @extend %jstb-icon;

-            &:before { content: $fa-var-indent; }
+      &::before { content: $fa-var-indent; }
    }

    .jstb_unbq {
      @extend %jstb-icon;

-            &:before { content: $fa-var-outdent; }
+      &::before { content: $fa-var-outdent; }
    }

    .jstb_pre {
      @extend %jstb-icon;

-            &:before { content: $fa-var-terminal; }
+      &::before { content: $fa-var-terminal; }
    }

    .jstb_link {
      @extend %jstb-icon;

-            &:before { content: $fa-var-link; }
+      &::before { content: $fa-var-link; }
    }

    .jstb_img {
      @extend %jstb-icon;

-            &:before { content: $fa-var-image; }
+      &::before { content: $fa-var-image; }
    }

    .jstb_cut {
      @extend %jstb-icon;

-            &:before { content: $fa-var-scissors; }
+      &::before { content: $fa-var-scissors; }
    }

+    .jstb_precode,
    // 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 +169,7 @@
        color: $link-hover-color;
      }

-            &:before { content: $fa-var-question-circle; }
+      &::before { content: $fa-var-question-circle; }
    }
  }
 }
--- a/src/sass/components/_list.scss
+++ b/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,17 +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;
@@ -58,6 +66,25 @@ table.list {
      text-align: right;
    }

+    &.assigned_to,
+    &.author,
+    &.activity,
+    &.category,
+    &.comments,
+    &.description,
+    &.fixed_version,
+    &.name,
+    &.priority,
+    &.relations,
+    &.roles,
+    &.status,
+    &.string,
+    &.subject,
+    &.text,
+    &.user {
+      text-align: left;
+    }
+
    &.estimated_hours,
    &.remaining_hours,
    &.spent_hours,
@@ -67,6 +94,13 @@ table.list {
      text-align: right;
    }

+    &.reorder {
+      white-space: nowrap;
+    }
+  }
+
+  td,
+  div {
    &.buttons {
      text-align: right;
      white-space: nowrap;
@@ -74,22 +108,10 @@ table.list {
      a {
        padding-right: 5px;
      }
-        }

-        &.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 +121,12 @@ table.list {
  }
 }

+.table-list-cell {
+  display: table-cell;
+  padding: $table-cell-padding;
+  vertical-align: top;
+}
+
 tr.project {
  .name a {
    white-space: nowrap;
@@ -112,8 +140,8 @@ tr.project {
  }

  &.idnt .name span {
-        padding-left: 16px;
    @extend %image-arrow-right;
+    padding-left: 16px;
    background-repeat: no-repeat;
    background-position: -5px 50%;
  }
@@ -129,14 +157,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,22 +173,12 @@ tr.issue {
    }
  }

-    &.done_ratio table.progress {
-        margin-right: auto;
-        margin-left: auto;
-    }
-
  &.idnt .subject a {
-        padding-left: 16px;
    @extend %image-arrow-right;
+    padding-left: 10px;
    background-repeat: no-repeat;
-
-        @if $color-trackers {
-            background-position: 0 0;
-        } @else {
    background-position: -5px 0;
  }
-    }

  .controller-issues.action-index & {
    &.assigned-to-me {
@@ -201,13 +219,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 {
@@ -266,11 +284,11 @@ tr.entry {
 }


-/**
- * Priorities
- */
-// scss-lint:disable SpaceAfterComma
+//== Priorities
+//
+
@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 +327,20 @@ tr.entry {
      color: mix($tracker-default-text, $tracker-default-bg, 75%);
      text-decoration: none;

-            &:after {
+      &::after {
        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,7 +350,7 @@ tr.entry {
    display: block;
    padding: $tracker-list-padding;

-        &:before {
+    &::before {
      color: mix($tracker-default-text, $tracker-default-bg, 50%);
      content: "#";
    }
@@ -370,9 +388,8 @@ tr.entry {
 }


-/**
- * List groups
- */
+//== List groups
+//

 tr.group {
  > td {
@@ -413,9 +430,8 @@ tr.group {
 }


-/**
- * Time entry in report
- */
+//== Time entry in report
+//

 tr.time-entry {
  text-align: center;
@@ -468,9 +484,8 @@ tr.time-entry {
  }
 }

-/**
- * Wiki page history entry
- */
+//== Wiki page history entry
+//

 tr.wiki-page-version {
  td.updated_on,
@@ -479,9 +494,8 @@ tr.wiki-page-version {
  }
 }

-/**
- * Project versions list
- */
+//== Project versions list
+//

 tr.version {
  &.closed {
@@ -503,9 +517,8 @@ tr.version {
 }


-/**
- * Users list
- */
+//== Users list
+//

 tr.user {
  td {
@@ -533,9 +546,8 @@ tr.user {
 }


-/**
- * Plugins list
- */
+//== Plugins list
+//

 table.plugins {
  .configure {
@@ -555,9 +567,8 @@ table.plugins {
 }


-/**
- * Files list
- */
+//== Files list
+//

 table.files {
  tbody th {
@@ -576,9 +587,9 @@ table.files {
  }
 }

-/**
- * Admin lists
- */
+
+//== Admin lists
+//

 .controller-enumerations {
  td.name {
@@ -591,3 +602,21 @@ table.files {
    text-align: center;
  }
 }
+
+
+//== Totals
+//
+
+.query-totals {
+  > span {
+    margin-right: $padding-base-horizontal;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .value {
+    font-weight: $font-weight-bold;
+  }
+}
--- a/src/sass/components/_pagination.scss
+++ b/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,7 +52,8 @@
    }
  }

-    .page.current {
+  .page.current,
+  .current > span {
    border-color: $pagination-active-border;
    background-color: $pagination-active-bg;
    color: $pagination-active-color;
@@ -39,4 +71,13 @@
 p.pagination {
  margin-bottom: 0;
  float: left;
+
+  + h1,
+  + h2,
+  + h3,
+  + h4,
+  + h5,
+  + h6 {
+    clear: both;
+  }
 }
--- a/src/sass/components/_plugins.scss
+++ b/src/sass/components/_plugins.scss
@@ -42,12 +42,19 @@
 // --------------------------------------------------

@if $use-font-awesome {
-    .icon.icon-start,
-    .icon.icon-stop {
+  .tt_list_button {
+    @extend %fa-icon;
+    font-size: 14px;
+  }
+
+  .icon,
+  .tt_list_button {
+    &.icon-start,
+    &.icon-stop {
      background-image: none;
    }

-    .icon.icon-start {
+    &.icon-start {
      color: $icon-success-color;

      &:hover,
@@ -55,12 +62,12 @@
        color: $icon-success-color;
      }

-        &:before {
+      &::before {
        content: $fa-var-clock-o;
      }
    }

-    .icon.icon-stop {
+    &.icon-stop {
      color: $icon-danger-color;

      &:hover,
@@ -68,14 +75,19 @@
        color: $icon-danger-color;
      }

-        &:before {
+      &::before {
        content: $fa-var-history;
      }
    }
+  }

  .time-tracker-quick-menu:empty {
    display: none;
  }
+
+  #user-time-bookings-list {
+    clear: both;
+  }
 }


@@ -307,8 +319,8 @@
      top: $table-cell-padding - 1px;
      right: $table-cell-padding;
      left: auto;
-            font-size: $font-size-small;
      width: 20%;
+      font-size: $font-size-small;
      text-align: right;
    }
  }
--- a/src/sass/components/_print.scss
+++ b/src/sass/components/_print.scss
@@ -20,13 +20,12 @@
  }

  #content {
-        // scss-lint:disable ImportantRule
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
-        overflow: visible !important;
+    overflow: visible !important; // scss-lint:disable ImportantRule
  }

  .autoscroll {
--- a/src/sass/components/_progress.scss
+++ b/src/sass/components/_progress.scss
@@ -3,12 +3,17 @@
 // --------------------------------------------------

 table.progress {
+  width: 80px;
  margin-top: 1px;
  margin-right: 5px;
  float: left;
  border: 1px solid rgba(#000, .1);
  empty-cells: show;

+  .version-overview & {
+    width: 40em;
+  }
+
  td.done_ratio & {
    margin-right: auto;
    margin-left: auto;
--- a/src/sass/components/_simple-list.scss
+++ b/src/sass/components/_simple-list.scss
@@ -20,7 +20,7 @@
    background-position: 0 center;
  }

-    span.project:after {
+  span.project::after {
    content: " -";
  }

@@ -105,9 +105,9 @@
  }

  label {
+    @include checkbox;
    display: inline-block;
    margin-right: 5px;
-        @include checkbox;
  }

  p:last-child {
--- a/src/sass/components/_tabs.scss
+++ b/src/sass/components/_tabs.scss
@@ -14,20 +14,15 @@
  }

  > ul {
-        // scss-lint:disable VendorPrefix
    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: $line-height-computed + $tab-padding-vertical * 2 + 1px;
    } @else {
      width: 2000px;
      @extend %clearfix;
@@ -37,8 +32,6 @@
      margin-bottom: -1px;

      @if $flexbox-layout {
-                -webkit-flex: 0 1 auto;
-                -ms-flex: 0 1 auto;
        flex: 0 1 auto;
      } @else {
        float: left;
@@ -85,13 +78,14 @@
      margin: 0;
      padding: 0;
      float: left;
+      transition: opacity .1s;
      border: 0 none;
+      border-radius: 0;
      background-color: $body-bg;
      background-repeat: no-repeat;
      background-position: center center;
      box-shadow: none;
      opacity: .8;
-            @include transition(opacity .1s);

      &:hover,
      &:active {
@@ -113,9 +107,8 @@
  }
 }

-/**
- * Specific tabs content layout
- */
+//== Specific tabs content layout
+//

 #tab-content-modules fieldset p {
  margin: 3px 0 4px;
@@ -140,9 +133,9 @@
    }

    label {
+      @include checkbox;
      display: block;
      margin-bottom: 3px;
-            @include checkbox;
    }

    label[for=principal_search] {
@@ -166,3 +159,9 @@
 #tab-content-memberships .splitcontentright select {
  width: 100%;
 }
+
+#principals_for_new_member {
+  .pagination {
+    float: none;
+  }
+}
--- a/src/sass/components/_top.scss
+++ b/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,12 +37,12 @@
      } @else {
        right: $toggler-position-h;
      }
-            @include user-select(none);
+      user-select: none;

      @if $use-font-awesome {
        font-size: 14px;

-                &:before {
+        &::before {
          content: $fa-var-caret-square-o-down;
        }
      } @else {
@@ -54,7 +54,7 @@
        color: mix($top-menu-link, $top-menu-bg, 33%);
        line-height: 1;

-                &:before {
+        &::before {
          margin-right: 0;
        }

@@ -79,7 +79,7 @@

      &.expanded {
        @if $use-font-awesome {
-                    &:before {
+          &::before {
            content: $fa-var-caret-square-o-up;
          }
        } @else {
@@ -136,10 +136,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 +155,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 {
@@ -187,10 +196,12 @@
  input,
  select {
    margin-left: 5px;
+    transition: color ease-in-out .1s,
+                background-color ease-in-out .1s,
+                border-color ease-in-out .1s;
    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);

    &:focus {
      border-color: darken($header-bg, 35%);
@@ -217,115 +228,56 @@
 #main-menu {
  clear: both;
  background-color: $main-menu-bg;
+  color: $text-color;
  box-shadow: inset 0 -1px $main-menu-border;

-    @if $main-menu-collapse {
-        $toggler-position-v:    $main-menu-padding-vertical + 3px;
-        $toggler-position-h:    1px;
+  &.tabs {
+    margin-bottom: 0;
+    overflow: inherit;

-        position: relative;
-        max-height: $line-height-computed + $main-menu-padding-vertical * 2;
-        overflow: hidden;
+    > ul {
+      height: auto;

-        &.expanded {
-            max-height: none;
+      > li {
+        > a {
+          border: 0 none;
+          border-radius: 0;
+          background: transparent;
        }
-
-        .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);
-
-            @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;
-                    }
-                } @else {
-                    @extend %image-arrow-up;
-                }
-            }
-
-            @media screen and (min-width: $main-menu-collapse-breakpoint) {
-                display: none;
-            }
-        }
-    } @else {
-        @media screen and (max-width: $screen-sm-max) {
-            font-size: $font-size-small-px;
-        }
-    }
-
-    ul {
+  > ul {
+    @extend %clearfix;
    margin: 0;
    padding: 0 ($padding-side - $main-menu-padding-horizontal);
    color: $main-menu-link;
    list-style: none;
-        @extend %clearfix;

    > li {
+      position: relative;
      margin-right: .5em;
      float: left;

+      &:hover {
+        > .new-object {
+          border-bottom: 1px solid $main-menu-dropdown-bg;
+          z-index: 100;
+        }
+
+        > .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;
@@ -346,6 +298,24 @@
          font-weight: $font-weight-bold;
          box-shadow: none;
        }
+
+        &.new-object {
+          position: relative;
+          min-width: 1.1em;
+          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;
+          }
+        }
      }
    }
  }
@@ -353,4 +323,56 @@
  a {
    color: $main-menu-link;
  }
+
+  .menu-children {
+    @include nice-shadow(2);
+    display: none;
+    position: absolute;
+    min-width: 130px;
+    margin: 0 1px;
+    padding: 0;
+    border-radius: 0 0 $border-radius-base $border-radius-base;
+    background: $main-menu-dropdown-bg;
+    list-style: none;
+    overflow: hidden;
+    z-index: 1001;
+
+    &.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;
+    background-color: $main-menu-bg;
+
+    > button {
+      height: $main-menu-padding-vertical * 2 + $line-height-computed - 1px;
+      background-color: $main-menu-bg;
+    }
+  }
+
+  ul + .tabs-buttons {
+    display: block !important; // scss-lint:disable ImportantRule
+  }
 }
--- a/src/sass/components/_wiki.scss
+++ b/src/sass/components/_wiki.scss
@@ -3,18 +3,14 @@
  font-size: $wiki-font-size;

  @if $wiki-page-more-vertical-space {
-        /**
-         * Anchors will make headers more separated,
-         * and it will look better when you open page with hash in URL
-         */
+    // Anchors will make headers more separated,
+    // and it will look better when you open page with hash in URL
    a[name]:empty {
      display: block;
      overflow: hidden;
    }

-        /**
-         * Add some space between list items
-         */
+    // Add some space between list items
    ul,
    ol {
      li {
@@ -55,21 +51,36 @@ div.wiki {
    line-height: $headings-line-height;
  }

-    h1, .h1 { font-size: $font-size-h1; line-height: 1.2; }
-    h2, .h2 { font-size: $font-size-h2; line-height: 1.225; }
-    h3, .h3 { font-size: $font-size-h3; line-height: 1.43; }
-    h4, .h4 { font-size: $font-size-h4; }
-    h5, .h5 { font-size: $font-size-h5; }
-    h6, .h6 { font-size: $font-size-h6; }
+  h1, .h1 {
+    padding-bottom: .3em;
+    border-bottom: 1px solid $gray-lighter;
+    font-size: $font-size-h1;
+    line-height: 1.2;
+  }

-    h1, .h1,
  h2, .h2 {
    padding-bottom: .3em;
    border-bottom: 1px solid $gray-lighter;
+    font-size: $font-size-h2;
+    line-height: 1.225;
+  }
+
+  h3, .h3 {
+    font-size: $font-size-h3;
+    line-height: 1.43;
+  }
+
+  h4, .h4 {
+    font-size: $font-size-h4;
+  }
+
+  h5, .h5 {
+    font-size: $font-size-h5;
  }

  h6, .h6 {
    color: $gray;
+    font-size: $font-size-h6;
  }

  .text-normal {
@@ -93,7 +104,7 @@ div.wiki {
    + h4,
    + h5,
    + h6 {
-            &:before {
+      &::before {
        display: inline-block;
        width: .7em;
        margin-left: -.7em;
@@ -104,7 +115,7 @@ div.wiki {
    }
  }

-    > *:last-child {
+  >:last-child {
    margin-bottom: 0;
  }

@@ -129,7 +140,6 @@ div.wiki {
  }

  a {
-        // scss-lint:disable DuplicateProperty
    word-break: break-all;
    word-break: break-word;
  }
@@ -155,7 +165,6 @@ div.wiki {
  }

  table {
-        // scss-lint:disable DuplicateProperty
    display: block;
    width: 100%;
    margin-bottom: $line-height-computed;
@@ -310,14 +319,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,7 +344,7 @@ h6 {
 p.footnote {
  margin-bottom: 5px;

-    &:before {
+  &::before {
    display: block;
    width: 300px;
    margin-top:  $line-height-computed;
@@ -345,7 +353,7 @@ p.footnote {
    content: "";
  }

-    + p.footnote:before {
+  + p.footnote::before {
    display: none;
  }
 }
@@ -382,10 +390,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 +425,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 +443,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; }
--- a/src/sass/javascripts/_sidebar-toggler.scss
+++ b/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,17 @@
    }

    .sidebar-toggler {
-        @include user-select(none);
-
        display: block;
        position: absolute;
        top: $toggler-position-v;
+        user-select: none;

        @if $use-font-awesome {
            @extend %fa-icon;
            color: $gray-light;
            line-height: 1;

-            &:before {
+            &::before {
                margin-right: 0;
            }

@@ -71,7 +70,7 @@
            left: $toggler-position-h;

            @if $use-font-awesome {
-                &:before {
+                &::before {
                    content: $fa-var-caret-square-o-left;
                }
            } @else {
@@ -81,7 +80,7 @@
            right: $toggler-position-h;

            @if $use-font-awesome {
-                &:before {
+                &::before {
                    content: $fa-var-caret-square-o-right;
                }
            } @else {
@@ -92,7 +91,7 @@
        &.sidebar-hidden {
            @if $sidebar-position == "left" {
                @if $use-font-awesome {
-                    &:before {
+                    &::before {
                        content: $fa-var-caret-square-o-right;
                    }
                } @else {
@@ -100,7 +99,7 @@
                }
            } @else {
                @if $use-font-awesome {
-                    &:before {
+                    &::before {
                        content: $fa-var-caret-square-o-left;
                    }
                } @else {
--- a/src/sass/lib/_font-awesome.scss
+++ b/src/sass/lib/_font-awesome.scss
@@ -1,4 +1,4 @@
-/*!
+/**
 *  Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
--- a/src/sass/lib/font-awesome/_mixins.scss
+++ b/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);
-}
--- a/src/sass/mixins/_buttons.scss
+++ b/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);
  }
 }
--- a/src/sass/mixins/_clearfix.scss
+++ b/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 {
-        clear: both;
-    }
-}
-
-
-// Lighter (for output CSS) cleafix with placeholder
-
-%clearfix {
-    &:after {
-        display: table;
+  &::after {
+    display: block;
    clear: both;
    content: "";
  }
 }
+
+%clearfix {
+  @include clearfix;
+}
--- a/src/sass/mixins/_forms.scss
+++ b/src/sass/mixins/_forms.scss
@@ -8,6 +8,15 @@
  }
 }

+// Placeholder text
+//
+@mixin placeholder($color: $input-color-placeholder) {
+  &::placeholder {
+    color: $color;
+    opacity: 1; // See https://github.com/twbs/bootstrap/pull/11526
+  }
+}
+

 // Form control sizing
 //
@@ -32,9 +41,9 @@
 }

@mixin checkbox() {
-    padding-left: 20px;
-    @include user-select(none);
  @extend %clearfix;
+  padding-left: 20px;
+  user-select: none;

  input[type="checkbox"] {
    margin-left: -20px;
--- a/src/sass/mixins/_gradients.scss
+++ b/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);
-}
--- a/src/sass/mixins/_issues.scss
+++ b/src/sass/mixins/_issues.scss
@@ -154,18 +154,18 @@
    &.closed {
      color: mix($color, $background, 75%);

-            &:after {
+      &::after {
        border-top-color: rgba($color, .95);
      }

-            &:hover:after {
+      &:hover::after {
        border-top-color: rgba($color, .25);
      }
    }
  }

  tr#{$parent} .id > a {
-        &:before {
+    &::before {
      color: mix($color, $background, 50%);
    }
  }
--- a/src/sass/mixins/_opacity.scss
+++ b/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)};
-}
--- a/src/sass/mixins/_shadows.scss
+++ b/src/sass/mixins/_shadows.scss
@@ -2,21 +2,17 @@

@mixin nice-shadow($depth: 1) {
  $shadow: none;
+
  @if ($depth == 1) {
-        // $shadow: 0 3px 1px -2px rgba(#000, .14), 0 2px 2px 0 rgba(#000, .098), 0 1px 5px 0 rgba(#000, .082);
    $shadow: 0 1px 3px rgba(#000, .12), 0 1px 2px rgba(#000, .24);
  } @elseif ($depth == 2) {
-        // $shadow: 0 2px 4px -1px rgba(#000, .14), 0 4px 5px 0 rgba(#000, .098), 0 1px 10px 0 rgba(#000, .082)
    $shadow: 0 3px 6px rgba(#000, .16), 0 3px 6px rgba(#000, .23);
  } @elseif ($depth == 3) {
-        // $shadow: 0 3px 5px -1px rgba(#000, .14), 0 6px 10px 0 rgba(#000, .098), 0 1px 18px 0 rgba(#000, .082)
    $shadow: 0 10px 18px rgba(#000, .19), 0 6px 8px rgba(#000, .23);
  } @elseif ($depth == 4) {
-        // $shadow: 0 5px 5px -3px rgba(#000, .14), 0 8px 10px 1px rgba(#000, .098), 0 3px 14px 2px rgba(#000, .082)
    $shadow: 0 14px 28px rgba(#000, .25), 0 10px 10px rgba(#000, .22);
  } @elseif ($depth == 5) {
-        // $shadow: 0 8px 10px -5px rgba(#000, .14), 0 16px 24px 2px rgba(#000, .098), 0 6px 30px 5px rgba(#000, .082)
-        $shadow: 0 19px 38px rgba(#000, .30), 0 15px 12px rgba(#000, .22);
+    $shadow: 0 19px 38px rgba(#000, .3), 0 15px 12px rgba(#000, .22);
  }

  box-shadow: $shadow;
--- a/src/sass/mixins/_vendor-prefixes.scss
+++ b/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;
-}
--- a/src/sass/plugins/redmine_backlogs/global.scss
+++ b/src/sass/plugins/redmine_backlogs/global.scss
@@ -43,9 +43,8 @@ a {
 }


-/**
- * Form elements
- */
+//== Form elements
+//

 button,
 input,
@@ -54,7 +53,7 @@ textarea {
  font-family: inherit;
  font-size: $font-size-base;
  line-height: $line-height-base;
-    @include box-sizing(border-box);
+  box-sizing: border-box;
 }

 select,
@@ -64,16 +63,16 @@ 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();
 }

 textarea {
@@ -89,6 +88,7 @@ select:-moz-focusring {
 button.ui-multiselect {
  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;
  background: $input-bg;
  color: $input-color;
@@ -96,8 +96,7 @@ button.ui-multiselect {
  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);
+  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,11 +118,11 @@ button.ui-multiselect {
 }


-/**
- * Top toolbar
- */
+//== Top toolbar
+//

 #toolbar {
+  @include clearfix;
  display: block;
  position: relative;
  padding: 10px $padding-side;
@@ -131,7 +130,6 @@ button.ui-multiselect {
  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 {
@@ -294,9 +288,8 @@ ul.ui-sortable {
  display: none;
 }

-/**
- * drag-drop effect: disabled dropzones are greyed out
- */
+//== drag-drop effect: disabled dropzones are greyed out
+//

 .rb-sortable-disabled,
 .ui-sortable-disabled {
@@ -310,9 +303,8 @@ ul.ui-sortable {
 }


-/**
- * Fix jQuery-UI datepicker
- */
+//== Fix jQuery-UI datepicker
+//

 body {
  .ui-widget {
--- a/src/sass/plugins/redmine_backlogs/jquery/jquery-ui.scss
+++ b/src/sass/plugins/redmine_backlogs/jquery/jquery-ui.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable ImportantRule
+// scss-lint:disable Comment
@import "../common";

 /*
@@ -32,7 +32,7 @@
 .ui-helper-clearfix {
  display: inline-block;

-    &:after {
+  &::after {
    display: block;
    height: 0;
    clear: both;
@@ -66,7 +66,7 @@
 ----------------------------------*/

 .ui-state-disabled {
-    cursor: default !important;
+  cursor: default !important; // scss-lint:disable ImportantRule
 }

 /* Icons
@@ -521,7 +521,7 @@

 .ui-widget-overlay {
  background: #000;
-    opacity: .30;
+  opacity: .3;
 }

 .ui-widget-shadow {
@@ -529,7 +529,7 @@
  padding: 8px;
  border-radius: 8px;
  background: #aaa;
-    opacity: .30;
+  opacity: .3;
 }

 /* Resizable
@@ -631,7 +631,7 @@
  }

  .ui-accordion-header-active {
-        border-bottom: 0 !important;
+    border-bottom: 0 !important; // scss-lint:disable ImportantRule
  }

  .ui-accordion-header a {
@@ -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;
@@ -732,7 +732,7 @@
  margin-right: .1em;
  padding: 0;
  text-align: center;
-    text-decoration: none !important;
+  text-decoration: none !important; // scss-lint:disable ImportantRule
  cursor: pointer;
  overflow: visible;
  zoom: 1;
@@ -1006,7 +1006,7 @@ button.ui-button::-moz-focus-inner {
      margin: 0 .2em 1px 0;
      padding: 0;
      float: left;
-            border-bottom: 0 !important;
+      border-bottom: 0 !important; // scss-lint:disable ImportantRule
      list-style: none;
      white-space: nowrap;

@@ -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;
@@ -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;
--- a/src/sass/plugins/redmine_backlogs/jquery/jquery.multiselect.scss
+++ b/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;
  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;
 }
--- a/src/sass/plugins/redmine_backlogs/jquery/jquery.qtip.scss
+++ b/src/sass/plugins/redmine_backlogs/jquery/jquery.qtip.scss
@@ -10,6 +10,7 @@
 }

 .ui-tooltip-content {
+  @include nice-shadow(2);
  position: relative;
  padding: 10px;
  border: 1px solid $tooltip-border;
@@ -18,7 +19,6 @@
  font-size: $font-size-list;
  text-align: left;
  word-wrap: break-word;
-    @include nice-shadow(2);
  overflow: hidden;
 }

--- a/src/sass/plugins/redmine_backlogs/master_backlog.scss
+++ b/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 {
@@ -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,6 +299,7 @@ $story-sp-input-width:          50px;
    .menu {
      position: relative;
      height: $header-line-height;
+      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;
@@ -314,13 +307,12 @@ $story-sp-input-width:          50px;
      line-height: $line-height-base;
      cursor: pointer;
      overflow: visible;
-            @include transition(background-color 0s .1s, border-color 0s .1s);

      &:hover {
+        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 {
@@ -338,6 +330,7 @@ $story-sp-input-width:          50px;
        left: -1px;
        margin: 0;
        padding: $padding-small-vertical 0;
+        transition: visibility 0s .1s;
        border: 1px solid $header-bg;
        border-top-width: 0;
        border-radius: 0 0 $border-radius-base $border-radius-base;
@@ -346,7 +339,6 @@ $story-sp-input-width:          50px;
        box-shadow: 0 2px 1px rgba(#000, .1);
        visibility: hidden;
        z-index: 999;
-                @include transition(visibility 0s .1s);

        a {
          color: $gray-darker;
@@ -354,8 +346,8 @@ $story-sp-input-width:          50px;
      }

      &:hover .items {
+        transition: visibility 0s 0s;
        visibility: visible;
-                @include transition(visibility 0s 0s);
      }

      .item {
@@ -393,8 +385,8 @@ $story-sp-input-width:          50px;
          background-color: darken($body-bg, 8%);

          ul {
+            transition: visibility 0s 0s;
            visibility: visible;
-                        @include transition(visibility 0s 0s);
          }
        }
      }
@@ -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 {
@@ -501,7 +491,7 @@ $story-sp-input-width:          50px;
          font-weight: $font-weight-bold;
          text-align: right;

-                    &:before {
+          &::before {
            margin-left: -1em;
            @if $color-trackers {
              color: mix($tracker-default-text, $tracker-default-bg, 50%);
@@ -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);
@@ -546,9 +536,12 @@ $story-sp-input-width:          50px;
      }
    }

+    .fff-middle {
+      padding: $table-condensed-cell-padding 0;
+    }
+
    .subject {
      @include text-overflow;
-            padding: $table-condensed-cell-padding 0;
    }

    &.closed .subject {
@@ -606,11 +599,11 @@ $story-sp-input-width:          50px;
      }

      .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,7 +643,7 @@ $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;
@@ -686,10 +679,7 @@ $story-sp-input-width:          50px;
    cursor: default;
  }

-    /**
-     * override: display story subject in multiple lines
-     */
-
+  // Override: display story subject in multiple lines
  .rb-multilinesubject & .subject {
    height: auto;
    white-space: normal;
@@ -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;
+}
--- a/src/sass/plugins/redmine_backlogs/taskboard.scss
+++ b/src/sass/plugins/redmine_backlogs/taskboard.scss
@@ -43,14 +43,14 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
 }


-/**
- * swimlane class is used by:
- * - #board_header
- * - .board
- *
- * Also use by the Column Width preference to determine the unit width of the
- * swimlanes. See RB.Taskboard.initialize()
- */
+//== Swimlane
+//
+// Swimlane class is used by:
+// - #board_header
+// - .board
+// Also use by the Column Width preference to determine the unit width of the
+// swimlanes. See RB.Taskboard.initialize()
+//

 .swimlane {
  width: $swimlane-width;
@@ -58,7 +58,9 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
  padding: 5px;
 }

-/* status labels */
+
+//== Status labels
+//

 #board_header {
  position: absolute;
@@ -208,7 +210,9 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
  }
 }

-/* item styles used by .task and .impediment */
+
+//== Item styles used by .task and .impediment
+//

 #taskboard {
  .issue,
@@ -361,7 +365,9 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
  }
 }

-/* dialog */
+
+//== Dialog
+//

 .rb_editor_dialog.ui-dialog {
  .ui-dialog-titlebar-close {
@@ -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 {
--- a/stylesheets/application.css
+++ b/stylesheets/application.css
Author	SHA1	Message	Date
mrliptontea	4e1ebf53fb	Update readme for release v1.8.0	2016-11-20 23:39:56 +00:00
mrliptontea	06638406f0	Use standardjs	2016-11-20 23:31:10 +00:00
mrliptontea	af40d823bd	Small correction for changeset lists	2016-11-20 23:27:58 +00:00
mrliptontea	beeff247a4	Extend scss linter settings - Enable DeclarationOrder rule - Change declaration order in scss - Enable VendorPrefix rule - Add Autoprefixer via Postcss to css task - Move scss-lint comments in-line	2016-11-20 23:04:32 +00:00
mrliptontea	abb16c53f3	Change indentation to 2 spaces To comply with Redmine's coding style.	2016-11-20 21:07:06 +00:00
mrliptontea	d0e6246e99	Linting - Update scss_lint rules - Fix linter errors - Add .editorconfig file	2016-11-20 20:19:51 +00:00
mrliptontea	53d1c6dcec	Update readme	2016-11-19 21:12:19 +00:00
mrliptontea	6dcbf4e150	Comply to the latest features of Redmine, fix #37 - Support drag-and-drop sorting - Introduce new icons - Add styles for .table-list	2016-11-19 21:12:10 +00:00
mrliptontea	c9f897e3b1	Correct layout for redmine backlogs	2016-11-19 19:18:41 +00:00
mrliptontea	d390c5a4d6	Fix some issues with top bar	2016-11-19 19:18:10 +00:00
mrliptontea	928b88dbaf	Improve layout of user form	2016-11-19 17:28:35 +00:00
Grzegorz Rajchman	40450468f2	Merge pull request #39 from wbstr/fix/mainMenuZIndex Fixed #38: Main menu children (new issue, etc.) and backlogs plugin	2016-11-19 17:26:39 +00:00
Tamas Futo	7e9939f5ed	Fixed #38 : Main menu children (new issue, etc.) and backlogs plugin compatibility issue	2016-11-03 14:52:24 +01:00
mrliptontea	a72cf5a9ee	wrap project breadcrumbs in the header, fixes #34	2016-08-11 21:24:01 +01:00
mrliptontea	c88c05f159	hide text for .icon-only and fix some icon positions, fixes #35	2016-08-11 21:11:41 +01:00
mrliptontea	aac8a88bfe	update README	2016-08-10 19:37:57 +01:00
mrliptontea	defabec1ed	update node dependencies and move them to production, fixes #36	2016-08-10 19:35:35 +01:00
mrliptontea	4181c09b02	mention latest visual changes in changelog	2016-07-02 23:59:44 +01:00
mrliptontea	1c620b3b4e	icon for PNG export format	2016-07-02 23:59:00 +01:00
mrliptontea	a8355d5c64	make links in p.buttons look like buttons	2016-07-02 23:56:15 +01:00
mrliptontea	1da7710cea	improve styling for totals	2016-07-02 22:06:40 +01:00
mrliptontea	2b537786d9	improve inline checkbox styles	2016-07-02 22:04:31 +01:00
mrliptontea	2e7d9a1308	override margin-bottom for box headers to improve vertical rhythm	2016-07-02 21:19:41 +01:00
mrliptontea	9a4c33153e	improved styles for news	2016-07-02 21:14:36 +01:00
mrliptontea	00fed09d8e	add styles for inactive pagination elements	2016-07-02 20:58:28 +01:00
mrliptontea	f560febce2	unify method of removing bottom margin from the last-child	2016-07-02 20:52:51 +01:00
mrliptontea	7612e8b004	small improvements for box panels styling	2016-07-02 20:46:44 +01:00
mrliptontea	02dd1f43a0	fix styling for 'Private' checkbox in Redmine 3.1+	2016-07-02 20:33:20 +01:00
mrliptontea	60cd90a36a	unlock custom styling for all HTML5 input types	2016-07-02 20:15:01 +01:00
mrliptontea	77d07307b1	align help editor button to the right only on screen sizes md and up	2016-07-02 20:14:04 +01:00
mrliptontea	80cd0c620f	support native editor 'highlighted code' button in Redmine 3.3	2016-07-02 20:02:22 +01:00
mrliptontea	8b3339f629	fix duplicated toggle-multiselect styles in Redmine 3.3	2016-06-24 00:09:55 +01:00
mrliptontea	6b6b12842c	update changelog	2016-06-24 00:03:25 +01:00
mrliptontea	c160914448	display correct icon in journal actions for users that cannot edit notes, fixes #28	2016-06-24 00:02:23 +01:00
mrliptontea	b5f351f135	improve pagination styling, fixes #25	2016-06-23 23:49:43 +01:00
mrliptontea	97476e3bda	fix few issues with icons - apply FA to .icon-only class - use check instead of check-square - make ticks green - wrap context menu styles in FA condition	2016-06-23 23:47:50 +01:00
mrliptontea	38ee17c8a8	properly set widths for progress bars, fixes #23	2016-06-23 23:32:44 +01:00
mrliptontea	7b95f93194	improve styles for the main menu in Redmine 3.3, fixes #32 , refs #33	2016-06-23 23:30:08 +01:00
mrliptontea	324a236a02	remove trailing whitespaces	2016-06-23 21:46:45 +01:00
mrliptontea	b9035527ea	move font-awesome import outside of if statement, fixes #30	2016-06-23 21:43:01 +01:00
Grzegorz Rajchman	428be4db9a	Merge pull request #33 from shawndibble/master Updated to work with Redmine 3.3	2016-06-23 07:08:24 +01:00
shawndibble	c6a20766c6	Update _top.scss	2016-06-22 16:56:22 -05:00
shawndibble	7430f1d844	Updated to work with Redmine 3.3 Redmine 3.3 adjusted their main-menu and added a drop down. These changes correct this issue.	2016-06-22 16:39:41 -05:00
mrliptontea	a931c63ed4	compatibility with Redmine 3.2.0 layout, fixes #21	2015-12-14 23:06:08 +00:00
mrliptontea	3b95b931f8	correct attributes order in _plugins.scss	2015-12-07 23:33:51 +00:00
mrliptontea	e247564c3e	fix duplicated pencil icon for Description in issue form in Redmine 3.1.2+	2015-12-07 23:28:47 +00:00
mrliptontea	76fc0f4b7c	apply Font Awesome font-family for icons in Time Tracker overview	2015-12-07 22:21:40 +00:00
mrliptontea	61b6475e9e	add wrapping and set alignment for long text custom fields, fixes #19	2015-12-03 23:49:44 +00:00
mrliptontea	f3a617baf0	release v1.7.2	2015-10-12 10:14:50 +02:00
mrliptontea	db39c6cb54	align cells in lists to center by default	2015-10-12 10:13:56 +02:00
mrliptontea	c45de83791	fix `.pagination` float in project members settings	2015-10-12 09:48:47 +02:00
mrliptontea	6f508ba87a	add badges to README (badges are in, right?)	2015-10-10 22:38:09 +02:00
mrliptontea	49ed887fce	argh, update links in README after transfering repo	2015-10-10 21:57:41 +02:00