Update readme for release v1.8.0

- Enable DeclarationOrder rule
- Change declaration order in scss
- Enable VendorPrefix rule
- Add Autoprefixer via Postcss to css task
- Move scss-lint comments in-line

.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

.gitignore

@@ -1,4 +1,5 @@
 /.sass-cache
 /node_modules
-/sass/_custom-variables.scss
+/src/sass/_custom-variables.scss
 /.sublime-grunt.cache
+/images/logo

.scss-lint.yml

@@ -1,4 +1,6 @@
-scss_files: "**/*.scss"
+scss_files: "src/sass/**/*.scss"
+
+exclude: 'src/sass/lib/**'
 
 linters:
   BangFormat:
@@ -12,21 +14,25 @@ linters:
   ColorKeyword:
     enabled: true
 
-  Comment:
+  ColorVariable:
     enabled: false
 
+  Comment:
+    enabled: true
+
   DebugStatement:
     enabled: true
 
   DeclarationOrder:
-    enabled: false
+    enabled: true
 
   DuplicateProperty:
     enabled: true
+    ignore_consecutive:
+      - word-break
 
   ElsePlacement:
-    enabled: false
+    enabled: true
-    style: same_line
 
   EmptyLineBetweenBlocks:
     enabled: true
@@ -62,9 +68,9 @@ linters:
     filename_extension: false
 
   Indentation:
-    enabled: false
+    enabled: true
     character: space
-    width: 4
+    width: 2
 
   LeadingZero:
     enabled: true
@@ -89,6 +95,9 @@ linters:
     enabled: true
     extra_properties: []
 
+  PseudoElement:
+    enabled: true
+
   QualifyingElement:
     enabled: false
 
@@ -119,6 +128,12 @@ linters:
   SpaceAfterPropertyName:
     enabled: true
 
+  SpaceAfterVariableName:
+    enabled: true
+
+  SpaceAroundOperator:
+    enabled: true
+
   SpaceBeforeBrace:
     enabled: true
     style: space
@@ -135,8 +150,14 @@ linters:
   TrailingSemicolon:
     enabled: true
 
+  TrailingWhitespace:
+    enabled: true
+
   TrailingZero:
-    enabled: false
+    enabled: true
+
+  TransitionAll:
+    enabled: true
 
   UnnecessaryMantissa:
     enabled: true
@@ -149,3 +170,9 @@ linters:
 
   UrlQuotes:
     enabled: true
+
+  VendorPrefix:
+    enabled: true
+
+  ZeroUnit:
+    enabled: true

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: {
-          'plugins/redmine_backlogs/global.css':
+        files: [
-            '<%= src %>sass/plugins/redmine_backlogs/global.scss',
+          {
-          'plugins/redmine_backlogs/master_backlog.css':
+            expand: true,
-            '<%= src %>sass/plugins/redmine_backlogs/master_backlog.scss',
+            cwd: '<%= src %>sass/plugins/',
-          'plugins/redmine_backlogs/statistics.css':
+            src: '**/*.scss',
-            '<%= src %>sass/plugins/redmine_backlogs/statistics.scss',
+            dest: 'plugins/',
-          'plugins/redmine_backlogs/taskboard.css':
+            ext: '.css',
-            '<%= src %>sass/plugins/redmine_backlogs/taskboard.scss',
+            extDot: 'last'
-          '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'
           }
+        ]
+      }
+    },
+
+    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-sass')
-  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-postcss')
-  grunt.loadNpmTasks("grunt-contrib-uglify");
+  grunt.loadNpmTasks('grunt-contrib-watch')
+  grunt.loadNpmTasks('grunt-contrib-uglify')
 
-  grunt.registerTask('css', ['sass']);
+  grunt.registerTask('css', ['sass', 'postcss'])
-  grunt.registerTask('js', ['uglify']);
+  grunt.registerTask('js', ['uglify'])
 
-  grunt.registerTask('default', ['css', 'js']);
+  grunt.registerTask('default', ['css', 'js'])
-};
+}

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Grzegorz Rajchman <mrliptontea@griego.pl>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -2,9 +2,13 @@
 
 A free Redmine theme for modern browsers.
 
-![Screenshot](https://github.com/HolonGlobe/PurpleMine2/raw/master/screenshots/issues-list.png)
+![The MIT License](https://img.shields.io/badge/license-MIT-584492.svg?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/)
 
-Compatible with Redmine 2.5+ and browsers: IE9+, latest Firefox and Google Chrome (others were not tested).
+---
+
+![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).
 
 It's written in [SCSS]. It uses [normalize.css] and benefits from some parts of [Bootstrap][bootstrap-sass] like mixins, structure, and stuff.
 
@@ -20,7 +24,7 @@ It's written in [SCSS]. It uses [normalize.css] and benefits from some parts of
 
 ## How install it
 
-To install PurpleMine, just download [.zip](https://github.com/HolonGlobe/PurpleMine2/archive/master.zip) and unpack it to your Redmine's `public/themes` folder.
+To install PurpleMine, just download [.zip](https://github.com/mrliptontea/PurpleMine2/archive/master.zip) and unpack it to your Redmine's `public/themes` folder.
 
 Then go to Redmine > Administration > Settings > Display and select PurpleMine2 from the list and save the changes.
 
@@ -28,7 +32,7 @@ Then go to Redmine > Administration > Settings > Display and select PurpleMine2
 
 This theme also features a new look for [Redmine Backlogs][redmine_backlogs] plugin. To install it, simply copy stylesheets from `PurpleMine2/plugins/redmine_backlogs` and overwrite files in `{redmine}/plugins/redmine_backlogs/assets/stylesheets` and restart Redmine.
 
-Also, [Redmine Time Tracker][redmine_time_tracker] plugin should look nice with PurpleMine.
+Also, [Redmine Time Tracker][redmine_time_tracker] and [Redmine People][redmine_crm_people] plugins should look nice with PurpleMine.
 
 ## How to customize it
 
@@ -48,10 +52,112 @@ Now all the dependencies should be ready to use. Run one more command:
 
 And now the grunt is watching for changes in files placed in `src/` folder. Just change what you need, and it'll run SASS preprocessor automatically.
 
-Regrettably, optional file include is not possible in SASS, so I would recommend creating a new file, e.g. `_my_variables.scss` and importing it a the beginning of the `application.scss` file. That way all the variables with the `!default` flag could be overridden.
+Regrettably, optional file include is not possible in SASS, so I would recommend creating a new file, e.g. `src/sass/_custom-variables.scss` and importing it a the beginning of the `application.scss` file. That way all the variables with the `!default` flag could be overridden.
+
+The path `src/sass/_custom-variables.scss` is added to `.gitignore` so it should make upgrading PurpleMine with keeping your changes rather painless, given that the only thing you changed in PurpleMine's source was adding this one line with `@import "custom-variables";`.
+
+If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remember to include your `_custom-variables.scss` in `src/sass/plugins/redmine_backlogs/_common.scss`.
 
 ## 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
+
+v1.7.0 (2015-09-25):
+
+* Added styles for optgroup (Firefox only)
+* Fixed #13: #header was missing clearfix and was breaking the layout is some cases
+* Coloring issue's title instead of link in Gantt diagram for overdue issues
+* Updated npm packages: grunt-sass from 0.18.0 to 1.0.0 and grunt-contrib-uglify 0.7.0 to 0.9.1
+* Use flexbox layout by default (can be changed by setting `$flexbox-layout` to `false`)
+* Fixed animation issue when showing sidebar
+* Slightly modified buttons' style
+* Few visual tweaks: nicer shadows, improved datepickers layout
++ Configurable list borders and highlighting of hovered and even/odd rows
++ Introduce `$pagination-padding-` variables and make pagination buttons' height equal to buttons by default
+* Fixed #16: remove `white-space: nowrap` from external links to prevent breaking the page with flexbox layout
+* Fixed colored trackers in tooltips in Backlogs plugin
+* Fixed broken codebutton modal after making buttons wider
+* Changed the license to MIT
+
+v1.6.0 (2015-06-10):
+
+* Fixed #8: Setting `$top-menu-collapse` to `true` will enable script allowing to toggle if top menu should be collapsed (no wrapping) or expanded (wrapped, with auto height)
++ Header matching current URL fragment will have `#` prepended
++ Introduced `$font-weight-normal` and `$font-weight-bold` variables to give better control on the appearance of text with custom fonts
+* Fixed #9: Added `$main-menu-collapse` and applied the same logic as in #8
+* Fixed #12: Removed `display: block` from issue's subject link to allow context menu to popup upon right click next to subject
+* Resolved #11: Company logo can be added to the header
+
+v1.5.0 (2015-04-15):
+
+* Fixed #5: Added default style for colored issue links.
+* Introduced `$tracker-colors-map` and removed `$tracker-X-bg` variables.
+  See d220db1 comments for more details.
+* Fixed #6: Added default padding for table cells.
+
+v1.4.1 (2015-04-14):
+
+* Fixed #3: Closed tasks will be more appreciable.
+
+v1.4.0 (2015-04-10):
+
++ Introduced option `$wiki-page-more-vertical-space` (by default `true`) to improve wiki pages' readability even more
+* Fixed bottom margin of `pre` tag
++ Added a few helper classes from Bootstrap
+* WYSIWYG's icons will squeeze a little bit on smaller screens
+* Images in headers will be aligned to the middle vertically
++ Introduced `text-normal` class for resetting font's weight
++ Added class `toc-active-prev` that will "highlight" TOC as "active".
+* 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/mrliptontea/PurpleMine2/releases/tag/v1.4.0)
+
+v1.3.0 (2015-04-01):
+
+* Backlogs: make it possible to click on empty field
+* Corrected issue form columns widths so they will be equal in all fieldsets
+* Changesets will look similar to issue's journal
++ Improved revision page layout and added Font Awesome icons
++ Improved file content view
+* Fixed #1: Font Awesome icons will no longer break plugins' icons
++ Introduced styles for [People][redmine_crm_people] plugin
+* Enhanced styles for activities list
+* Regular buttons (e.g. `Cancel`) will look like links in dialog windows
+* Fixed look of collapsible arrow in Firefox
++ Overrode Redmine's revision graph function to make it look better
++ Animated collapsible fieldsets
++ Custom image based icons changed to base64 embedded data
+
 v1.2.0 (2015-03-03):
 
 * Fixed .warning style
@@ -86,12 +192,10 @@ v1.0.0 (2015-02-06):
 
 Initial version
 
-## License
-
-[WTFPL](http://www.wtfpl.net/)
-
 [SCSS]: http://sass-lang.com/
 [normalize.css]: https://github.com/necolas/normalize.css
 [bootstrap-sass]: https://github.com/twbs/bootstrap-sass
 [redmine_backlogs]: https://github.com/backlogs/redmine_backlogs
 [redmine_time_tracker]: https://github.com/hicknhack-software/redmine_time_tracker
+[redmine_crm_people]: http://www.redminecrm.com/projects/people/
+[stuff_to_do]: https://github.com/raafael911/stuff_to_do_plugin

package.json

@@ -1,27 +1,40 @@
 {
   "name": "PurpleMine2",
-  "version": "2.0.0",
+  "description": "A free Redmine 2.5+ theme written in SCSS",
-  "description": "A free Redmine 2.5+ theme written in SASS",
   "keywords": [
     "redmine",
     "theme",
     "sass",
     "scss"
   ],
-  "author": "HolonGlobe",
+  "author": "mrliptontea",
   "repository": {
     "type": "git",
-    "url": "git@github.com:HolonGlobe/PurpleMine2.git"
+    "url": "git@github.com:mrliptontea/PurpleMine2.git"
   },
-  "license": "WTFPL",
+  "license": "MIT",
   "bugs": {
-    "url": "https://github.com/HolonGlobe/PurpleMine2/issues"
+    "url": "https://github.com/mrliptontea/PurpleMine2/issues"
+  },
+  "homepage": "https://github.com/mrliptontea/PurpleMine2",
+  "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"
   },
-  "homepage": "https://github.com/HolonGlobe/PurpleMine2",
   "devDependencies": {
-    "grunt": "^0.4.5",
+    "standard": "^8.5.0"
-    "grunt-contrib-uglify": "^0.7.0",
+  },
-    "grunt-contrib-watch": "^0.6.1",
+  "standard": {
-    "grunt-sass": "^0.18.0"
+    "globals": [ "$", "localStorage" ],
+    "ignore": [
+      "/javascripts"
+    ]
   }
 }

plugins/redmine_backlogs/jquery/jquery.multiselect.css

@@ -1 +1 @@
-.ui-multiselect{padding:2px 0 2px 4px;text-align:left}.ui-multiselect span.ui-icon{float:right}.ui-multiselect-single .ui-multiselect-checkboxes input{position:absolute !important;top:auto !important;left:-9999px}.ui-multiselect-single .ui-multiselect-checkboxes label{padding:5px !important}.ui-multiselect-header{margin-bottom:3px;padding:3px}.ui-multiselect-header ul{font-size:0.92em}.ui-multiselect-header ul li{padding:0 10px 0 0;float:left}.ui-multiselect-header a{text-decoration:none}.ui-multiselect-header a:hover{text-decoration:underline}.ui-multiselect-header span.ui-icon{float:left}.ui-multiselect-header li.ui-multiselect-close{padding-right:0;float:right;text-align:right}.ui-multiselect-menu{display:none;position:absolute;padding:3px;text-align:left;box-shadow:0 1px 2px rgba(0,0,0,0.1),0 3px 8px rgba(0,0,0,0.07);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: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}

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:#555555;font-size:0.92em;text-align:left;word-wrap:break-word;box-shadow:0 2px 2px rgba(0,0,0,0.2);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}

src/javascripts/modules/HistoryTabs.js

@@ -1,93 +1,87 @@
-var PurpleMine = PurpleMine || {};
+var PurpleMine = PurpleMine || {}
 
-PurpleMine.HistoryTabs = (function()
+PurpleMine.HistoryTabs = (function () {
-{
+  'use strict'
-    "use strict";
 
-    var self; // Make it work for browsers without Function.prototype.bind
+  var instance
   var translations = {
     en: {
-            all    : "All",
+      all: 'All',
-            notes  : "Notes",
+      notes: 'Notes',
-            details: "Changes"
+      details: 'Changes'
     },
     pl: {
-            all    : "Wszystko",
+      all: 'Wszystko',
-            notes  : "Notatki",
+      notes: 'Notatki',
-            details: "Zmiany"
+      details: 'Zmiany'
-        }
-    };
-
-    function HistoryTabs()
-    {
-        self = this;
-
-        this.$tabsContainer = null;
-        this.$tabs          = null;
-        this.$history       = $("#history");
-        this.lang           = document.documentElement.lang;
-
-        if ("undefined" === translations[this.lang])
-        {
-            this.lang = "en";
-        }
-
-        this._ = translations[this.lang];
-
-        if (this.$history.length > 0)
-        {
-            this.buildTabs();
-            this.markFirstOfTypes();
     }
   }
 
-    HistoryTabs.prototype.buildTabs = function()
+  function HistoryTabs () {
-    {
+    if (instance) {
-        var html = "",
+      return instance
-            liStart = "<li><a href=\"javascript:;\" class=\"",
-            liMid = "history-tab\" data-tab=\"",
-            liEnd = "</a></li>";
-
-        html += "<div class=\"tabs\"><ul>";
-        html += liStart + "selected " + liMid + "all\">" + this._.all + liEnd;
-        html += liStart + liMid + "notes\">" + this._.notes + liEnd;
-        html += liStart + liMid + "details\">" + this._.details + liEnd;
-        html += "</ul></div>";
-
-        this.$tabsContainer = $(html);
-        $("#history > h3").after(this.$tabsContainer);
-
-        this.$tabs = this.$tabsContainer.find(".history-tab");
-        this.$tabs.on("click", this.tabClick);
-    };
-
-    HistoryTabs.prototype.markFirstOfTypes = function()
-    {
-        this.$history.find(".has-notes:first").addClass("first-of-notes");
-        this.$history.find(".has-details:first").addClass("first-of-details");
-    };
-
-    HistoryTabs.prototype.tabClick = function()
-    {
-        var $this = $(this),
-            tab = $this.attr("data-tab");
-
-        self.$tabs.removeClass("selected");
-        $this.addClass("selected");
-
-        self.$history
-                .removeClass("hide-details")
-                .removeClass("hide-notes");
-
-        if ("notes" === tab)
-        {
-            self.$history.addClass("hide-details");
     }
-        else if ("details" === tab)
-        {
-            self.$history.addClass("hide-notes");
-        }
-    };
 
-    return HistoryTabs;
+    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'
+    }
+
+    this._ = translations[this.lang]
+
+    if (this.$history.length > 0) {
+      buildTabs()
+      markFirstOfTypes()
+    }
+  }
+
+  function buildTabs () {
+    var html = ''
+    var liStart = '<li><a href="javascript:;" class="'
+    var liMid = 'history-tab" data-tab="'
+    var liEnd = '</a></li>'
+
+    html += '<div class="tabs"><ul>'
+    html += liStart + 'selected ' + liMid + 'all">' + instance._.all + liEnd
+    html += liStart + liMid + 'notes">' + instance._.notes + liEnd
+    html += liStart + liMid + 'details">' + instance._.details + liEnd
+    html += '</ul></div>'
+
+    instance.$tabsContainer = $(html)
+    $('#history > h3').after(instance.$tabsContainer)
+
+    instance.$tabs = instance.$tabsContainer.find('.history-tab')
+    instance.$tabs.on('click', tabClick)
+  }
+
+  function markFirstOfTypes () {
+    instance.$history.find('.has-notes:first').addClass('first-of-notes')
+    instance.$history.find('.has-details:first').addClass('first-of-details')
+  }
+
+  var tabClick = function () {
+    var $this = $(this)
+    var tab = $this.attr('data-tab')
+
+    instance.$tabs.removeClass('selected')
+    $this.addClass('selected')
+
+    instance.$history
+        .removeClass('hide-details')
+        .removeClass('hide-notes')
+
+    if (tab === 'notes') {
+      instance.$history.addClass('hide-details')
+    } else if (tab === 'details') {
+      instance.$history.addClass('hide-notes')
+    }
+  }
+
+  return HistoryTabs
+}())

src/javascripts/modules/MenuCollapse.js

@@ -0,0 +1,116 @@
+var PurpleMine = PurpleMine || {}
+
+PurpleMine.MenuCollapse = (function () {
+  'use strict'
+
+  var instance
+  var translations = {
+    en: {
+      topMenuToggler: 'Expand/collapse top menu'
+    },
+    pl: {
+      topMenuToggler: 'Zwiń/rozwiń górne menu'
+    }
+  }
+
+  function MenuCollapse () {
+    if (instance) {
+      return instance
+    }
+
+    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')
+      }
+    }
+
+    for (var menu in this.menus) {
+      if (this.menus.hasOwnProperty(menu) && this.menus[menu].$el.length > 0) {
+        handleMenu(menu)
+      }
+    }
+  }
+
+  function handleMenu (menu) {
+    if (instance.menus[menu].$el.css('maxHeight') === 'none') {
+      return false
+    }
+
+    instance.menus[menu].collapsed = true
+
+    if (window.localStorage) {
+      instance.menus[menu].collapsed =
+        localStorage.getItem(getMenuStorageKey(menu)) === null
+    }
+
+    buildToggleButton(menu)
+
+    if (instance.isCollapsed(menu) === false) {
+      instance.expandMenu(menu)
+    }
+  }
+
+  function getMenuStorageKey (menu) {
+    return 'PurpleMine:' + menu + 'MenuExpanded'
+  }
+
+  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)
+
+    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 || ''
+
+    if (instance.isCollapsed(menu)) {
+      instance.expandMenu(menu)
+    } else {
+      instance.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.collapseMenu = function (menu) {
+    this.menus[menu].$el.removeClass('expanded')
+    this.menus[menu].$toggler.removeClass('expanded')
+    this.menus[menu].collapsed = true
+
+    if (window.localStorage) {
+      localStorage.removeItem(getMenuStorageKey(menu))
+    }
+  }
+
+  return MenuCollapse
+}())

src/javascripts/modules/RevisionGraph.js

@@ -0,0 +1,144 @@
+var PurpleMine = PurpleMine || {}
+/* global Raphael: false, revisionGraph: true */
+/* jshint camelcase: false */
+/* jshint maxstatements: false */
+/* jshint maxlen: 160 */
+
+PurpleMine.RevisionGraph = function (holder, commitsHash, graphSpace) {
+  'use strict'
+
+  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)
+  }
+
+  var top = revisionGraph.set()
+
+  // init dimensions
+  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(graphRightSide, graphBottom)
+
+  // init colors
+  var colors = [
+    '#e74c3c',
+    '#584492',
+    '#019851',
+    '#ed820c',
+    '#4183c4'
+  ]
+
+  // get more colors if needed
+  if (graphSpace >= colors.length) {
+    Raphael.getColor.reset()
+
+    for (var k = 0; k <= graphSpace; k++) {
+      colors.push(Raphael.getColor(0.9))
+    }
+  }
+
+  var parentCommit
+  var x, y, parentX, parentY
+  var path, title
+  var revisionDotOverlay
+
+  $.each(commits, function (index, commit) {
+    if (!commit.hasOwnProperty('space')) {
+      commit.space = 0
+    }
+
+    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)
+      .attr({
+        fill: colors[commit.space],
+        stroke: 'none'
+      })
+      .toFront()
+
+    // paths to parents
+    $.each(commit.parent_scmids, function (index, parentScmid) {
+      parentCommit = commitsByScmid[parentScmid]
+
+      if (parentCommit) {
+        if (!parentCommit.hasOwnProperty('space')) {
+          parentCommit.space = 0
+        }
+
+        parentY = commitTableRows.eq(maxRdmid - parentCommit.rdmid).position().top - graphYOffset + CIRCLE_INROW_OFFSET
+        parentX = graphXOffset + XSTEP / 2 + XSTEP * parentCommit.space
+
+        if (parentCommit.space === commit.space) {
+          // vertical path
+          path = revisionGraph.path([
+            '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 + (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 {
+        // vertical path ending at the bottom of the revisionGraph
+        path = revisionGraph.path([
+          'M', x, y,
+          'V', graphBottom
+        ])
+      }
+
+      path
+        .attr({
+          stroke: colors[commit.space],
+          'stroke-width': 1.5
+        })
+        .toBack()
+    })
+
+    revisionDotOverlay = revisionGraph.circle(x, y, 10)
+    revisionDotOverlay
+      .attr({
+        fill: '#000',
+        opacity: 0,
+        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))
+      revisionDotOverlay.node.appendChild(title)
+    }
+
+    top.push(revisionDotOverlay)
+  })
+
+  top.toFront()
+}
+
+$(function () {
+  'use strict'
+
+  if (window.drawRevisionGraph) {
+    // override Redmine's function
+    window.drawRevisionGraph = PurpleMine.RevisionGraph
+    // make graph redraw itself
+    $(window).resize()
+  }
+})

src/javascripts/modules/SidebarToggler.js

@@ -1,128 +1,135 @@
-var PurpleMine = PurpleMine || {};
+var PurpleMine = PurpleMine || {}
 
-PurpleMine.SidebarToggler = (function()
+PurpleMine.SidebarToggler = (function () {
-{
+  'use strict'
-    "use strict";
 
-    var self; // Make it work for browsers without Function.prototype.bind
+  var instance
+  var translations = {
+    en: {
+      toggler: 'Toggle sidebar'
+    },
+    pl: {
+      toggler: 'Pokaż/ukryj panel boczny'
+    }
+  }
 
-    function SidebarToggler()
+  function SidebarToggler () {
-    {
+    if (instance) {
-        self = this;
+      return instance
+    }
 
-        this.sidebarVisible = true;
+    instance = this
-        this.sidebarHiding  = null;
+
-        this.$toggler       = null;
+    this.sidebarVisible = true
-        this.$main          = $("#main");
+    this.sidebarHiding = null
-        this.$sidebar       = $("#sidebar");
+    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"))
+    if (this.$main.css('position') === 'relative') {
-        {
+      $('#context-menu').appendTo('#wrapper3')
-            $("#context-menu").appendTo("#wrapper3");
     }
 
-        if (window.localStorage)
+    handleSidebar()
-        {
-            this.sidebarVisible =
-                null === localStorage.getItem("PurpleMine:sidebarHidden");
   }
 
-        if (this.$sidebar.length > 0 &&
+  function handleSidebar () {
-            false === this.$main.hasClass("nosidebar"))
+    if (window.localStorage) {
-        {
+      instance.sidebarVisible =
-            this.buildButton();
+        localStorage.getItem('PurpleMine:sidebarHidden') === null
-            this.bindKeyHandler();
+    }
 
-            if (false === this.sidebarVisible)
+    if (
-            {
+      instance.$sidebar.length > 0 &&
-                this.hideSidebar(true);
+      instance.$main.hasClass('nosidebar') === false
+    ) {
+      buildButton()
+      bindKeyHandler()
+
+      if (instance.sidebarVisible === false) {
+        instance.hideSidebar(true)
       }
     }
   }
 
-    SidebarToggler.prototype.bindKeyHandler = function()
+  function bindKeyHandler () {
-    {
+    var body = document.getElementsByTagName('body')[0]
-        var body = document.getElementsByTagName("body")[0];
 
-        window.onkeydown = function(event)
+    window.onkeydown = function (event) {
-        {
+      if (
-            if (body === event.target && 83 === event.keyCode && // "s"
+        body === event.target &&
-                false === event.ctrlKey && false === event.altKey &&
+        event.keyCode === 83 && // "s"
-                false === event.shiftKey)
+        event.ctrlKey === false &&
-            {
+        event.altKey === false &&
-                self.toggleSidebar();
+        event.shiftKey === false
+      ) {
+        instance.toggleSidebar()
       }
-        };
-    };
-
-    SidebarToggler.prototype.buildButton = function()
-    {
-        var togglerLabel = document.documentElement.lang === "pl" ?
-                            "Pokaż/ukryj panel boczny" :
-                            "Toggle sidebar",
-            togglerClass = "sidebar-toggler",
-            togglerHtml;
-
-        togglerHtml = "<a href=\"javascript:;\" class=\"" + togglerClass +
-                        "\" title=\"" + togglerLabel + "\"></a>";
-        this.$toggler = $(togglerHtml);
-
-        this.$main.append(this.$toggler);
-        this.$toggler.on("click", this.toggleSidebar);
-    };
-
-    SidebarToggler.prototype.toggleSidebar = function()
-    {
-        if (self.sidebarVisible)
-        {
-            self.hideSidebar();
     }
-        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");
+  function buildButton () {
-        this.sidebarVisible = false;
+    var togglerClass = 'sidebar-toggler'
+    var togglerHtml = '<a href="javascript:;" class="' +
+      togglerClass +
+      '" title="' +
+      instance._.toggler +
+      '"></a>'
+    instance.$toggler = $(togglerHtml)
 
-        if (window.localStorage)
+    instance.$main.append(instance.$toggler)
-        {
+    instance.$toggler.on('click', instance.toggleSidebar)
-            localStorage.setItem("PurpleMine:sidebarHidden", "x");
   }
-    };
 
-    SidebarToggler.prototype.showSidebar = function()
+  SidebarToggler.prototype.toggleSidebar = function () {
-    {
+    if (instance.sidebarVisible) {
-        clearTimeout(this.sidebarHiding);
+      instance.hideSidebar()
-        this.$sidebar
+    } else {
-                .removeClass("sidebar-hidden", 0)
+      instance.showSidebar()
-                .removeClass("sidebar-hiding");
+    }
-
-        this.$toggler.removeClass("sidebar-hidden");
-        this.sidebarVisible = true;
-
-        if (window.localStorage)
-        {
-            localStorage.removeItem("PurpleMine:sidebarHidden");
   }
-    };
 
-    return SidebarToggler;
+  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)
+    }
+
+    this.$toggler.addClass('sidebar-hidden')
+    this.sidebarVisible = false
+
+    if (window.localStorage) {
+      localStorage.setItem('PurpleMine:sidebarHidden', 'x')
+    }
+  }
+
+  SidebarToggler.prototype.showSidebar = function () {
+    clearTimeout(this.sidebarHiding)
+
+    instance.$sidebar.removeClass('sidebar-hidden')
+    setTimeout(function sidebarTimeout () {
+      instance.$sidebar.removeClass('sidebar-hiding')
+    }, 50)
+
+    this.$toggler.removeClass('sidebar-hidden')
+    this.sidebarVisible = true
+
+    if (window.localStorage) {
+      localStorage.removeItem('PurpleMine:sidebarHidden')
+    }
+  }
+
+  return SidebarToggler
+}())

src/javascripts/theme.js

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

src/sass/_mixins.scss

@@ -5,9 +5,9 @@
 @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";
+@import "mixins/shadows";

src/sass/_variables.scss

@@ -7,6 +7,7 @@
 //
 
 $fixed-layout:                  false !default;
+$flexbox-layout:                true !default;
 $sidebar-position:              left !default;
 $color-priorities:              true !default;
 $color-trackers:                true !default;
@@ -14,8 +15,12 @@ $colored-issue:                 true !default;
 $color-status:                  true !default;
 $use-gravatars:                 true !default;
 $use-font-awesome:              true !default;
+$use-logo:                      false !default;
+$use-retina-logo:               false !default;
 $issue-subject-large:           true !default;
 $enable-sidebar-toggler:        true !default;
+$wiki-page-more-vertical-space: true !default;
+$top-menu-collapse:             false !default;
 
 
 //== Colors
@@ -67,12 +72,15 @@ $font-family-sans-serif:        "Helvetica Neue", Helvetica, Arial, freesans, sa
 
 $font-family-monospace:         Consolas, "Liberation Mono", Menlo, "Courier New", Courier, monospace !default;
 $font-family-base:              $font-family-sans-serif !default;
+$font-weight-normal:            normal !default;
+$font-weight-bold:              bold !default;
 
 $font-size-base:                14px !default;
 $font-size-large:               1.285em !default;
 $font-size-large-px:            18px !default;
-$font-size-small:               .86em !default;
+$font-size-small-unitless:      .86 !default;
-$font-size-small-px:            12px !default;
+$font-size-small:               $font-size-small-unitless * 1em !default;
+$font-size-small-px:            floor($font-size-small-unitless * $font-size-base) !default;
 
 $font-size-h1:                  2.25em !default;
 $font-size-h2:                  1.75em !default;
@@ -87,6 +95,8 @@ $line-height-computed:          floor(($font-size-base * $line-height-base)) !de
 
 $headings-font-weight:          700 !default;
 $headings-line-height:          1.4 !default;
+$headings-anchor-color:         $gray-lighter !default;
+$headings-anchor-color-active:  $gray-light !default;
 
 
 //== Wiki
@@ -96,6 +106,10 @@ $wiki-text:                     #333 !default;
 $wiki-font-size:                16px !default;
 $wiki-line-height:              1.6 !default;
 
+$toc-active-link:               darken($link-color, 10%) !default;
+$toc-active-link-hover:         darken($toc-active-link, 10%) !default;
+$toc-active-border:             $link-color !default;
+
 
 //== Components
 //
@@ -116,7 +130,6 @@ $border-radius-small:           2px !default;
 
 $hr-border:                     $gray-light !default;
 $abbr-border-color:             $gray-light !default;
-$blockquote-border-color-fallback: $gray-lighter !default;
 $blockquote-border-color:       rgba(#000, .15) !default;
 
 $component-color:               $gray-dark !default;
@@ -129,6 +142,8 @@ $component-active-border:       $brand-primary !default;
 
 $font-size-list:                .92em !default;
 
+$collapsible-animation-time:    .3s !default;
+
 
 //== Tables
 //
@@ -136,9 +151,17 @@ $font-size-list:                .92em !default;
 $table-cell-padding:            8px !default;
 $table-condensed-cell-padding:  5px !default;
 
+$table-list-header-border:      0 0 2px !default;
+$table-list-item-border:        0 0 1px !default;
+$table-list-color-odd-rows:     true !default;
+$table-list-color-even-rows:    false !default;
+$table-list-highlight-rows:     false !default;
+
 $table-bg:                      transparent !default;
-$table-bg-accent:               rgba(#000, .03) !default;
+$table-accent-factor:           .03 !default;
-$table-bg-hover:                #f1f1f1 !default;
+$table-hover-factor:            .03 !default;
+$table-bg-accent:               rgba(#000, $table-accent-factor) !default;
+$table-bg-hover:                rgba(#000, $table-hover-factor) !default;
 $table-bg-active:               $table-bg-hover !default;
 
 $table-border-color:            darken($body-bg, 13.5%) !default;
@@ -174,43 +197,84 @@ $priority-highest-link:         #a03 !default;
 $tracker-inline-padding:        1px 5px !default;
 $tracker-list-padding:          0 6px !default;
 
-$tracker-1-bg:                  $brand-danger !default;
+$tracker-default-bg:            #668 !default;
-$tracker-1-text:                $brand-text !default;
+$tracker-default-text:          $brand-text !default;
 
-$tracker-2-bg:                  $brand-info !default;
+$tracker-default-colors-map: (
-$tracker-2-text:                $brand-text !default;
+  1: (
-
+    background:             $brand-danger,
-$tracker-3-bg:                  $brand-success !default;
+    color:                  $brand-text
-$tracker-3-text:                $brand-text !default;
+  ),
-
+  2: (
-$tracker-4-bg:                  $brand-primary !default;
+    background:             $brand-info,
-$tracker-4-text:                $brand-text !default;
+    color:                  $brand-text
-
+  ),
-$tracker-5-bg:                  $brand-warning !default;
+  3: (
-$tracker-5-text:                $brand-text !default;
+    background:             $brand-success,
-
+    color:                  $brand-text
-$tracker-6-bg:                  mix($brand-success, $brand-info, 50%) !default;
+  ),
-$tracker-6-text:                $brand-text !default;
+  4: (
-
+    background:             $brand-primary,
-$tracker-7-bg:                  mix($brand-primary, $brand-warning, 50%) !default;
+    color:                  $brand-text
-$tracker-7-text:                $brand-text !default;
+  ),
+  5: (
+    background:             $brand-warning,
+    color:                  $brand-text
+  ),
+  6: (
+    background:             mix($brand-success, $brand-info, 50%),
+    color:                  $brand-text
+  ),
+  7: (
+    background:             mix($brand-primary, $brand-warning, 50%),
+    color:                  $brand-text
+  )
+) !default;
+$tracker-custom-colors-map:     () !default;
+$tracker-colors-map:            map-merge($tracker-default-colors-map, $tracker-custom-colors-map);
 
 
 //== Diffs
 //
 
-$diff-out-color:                #430;
+$diff-out-color:                #511 !default;
-$diff-out-bg:                   #ffeaaa;
+$diff-out-bg:                   #fbb !default;
-$diff-out-bg-light:             #ffefbf;
+$diff-out-bg-light:             rgba($diff-out-bg, .3) !default;
+
+$diff-in-color:                 #350 !default;
+$diff-in-bg:                    #afa !default;
+$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;
+$journal-new-value-bg:          rgba(#bffbbf, .3) !default;
+
+
+//== Changesets
+//
+
+$changeset-add-color:           $brand-success !default;
+$changeset-modified-color:      $brand-warning !default;
+$changeset-copied-color:        $brand-info !default;
+$changeset-renamed-color:       $brand-primary !default;
+$changeset-deleted-color:       $brand-danger !default;
 
-$diff-in-color:                 #350;
-$diff-in-bg:                    #bffbbf;
-$diff-in-bg-light:              #d8fcd8;
 
 //== Buttons
 //
 
 $btn-font-weight:               normal !default;
+$btn-padding-vertical:          3px !default;
+$btn-padding-horizontal:        12px !default;
+
+$btn-link-color:                $link-color !default;
+$btn-link-bg:                   $body-bg !default;
+$btn-link-border:               $body-bg !default;
 
 $btn-default-color:             $gray-darkest !default;
 $btn-default-bg:                $gray-lightest !default;
@@ -218,11 +282,11 @@ $btn-default-border:            $gray-lighter !default;
 
 $btn-primary-color:             #fff !default;
 $btn-primary-bg:                $brand-info !default;
-$btn-primary-border:            darken($btn-primary-bg, 5%) !default;
+$btn-primary-border:            $btn-primary-bg !default;
 
 $btn-success-color:             #fff !default;
 $btn-success-bg:                $brand-success !default;
-$btn-success-border:            darken($btn-success-bg, 5%) !default;
+$btn-success-border:            $btn-success-bg !default;
 
 
 //== Highlights
@@ -249,14 +313,14 @@ $input-border-radius-large:     $border-radius-large !default;
 $input-border-focus:            #51a7e8 !default;
 $input-color-placeholder:       #999 !default;
 
-$input-padding-vertical:        3px;
+$input-padding-vertical:        $btn-padding-vertical !default;
-$input-padding-horizontal:      8px;
+$input-padding-horizontal:      8px !default;
 
 $input-height-base:             ($line-height-computed + ($input-padding-vertical * 2) + 2) !default;
 
-$label-width:                   160px;
+$label-width:                   160px !default;
-$label-wide-width:              280px;
+$label-wide-width:              280px !default;
-$label-space:                   10px;
+$label-space:                   10px !default;
 
 $legend-color:                  $gray-dark !default;
 $legend-border-color:           #e5e5e5 !default;
@@ -274,10 +338,19 @@ $header-bg:                     $brand-primary !default;
 $header-text:                   $brand-text !default;
 $header-link:                   $brand-text !default;
 $header-root:                   $brand-accent !default;
+$header-padding-vertical:       10px !default;
+$header-padding-horizontal:     $padding-side !default;
 $header-title-size:             $font-size-h3 !default;
 $header-title-line-height:      $line-height-computed * 1.5 !default;
 
+$logo-image-width:              60px !default;
+$logo-image-height:             40px !default;
+$logo-position-horizontal:      $header-padding-vertical !default;
+$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;
@@ -286,23 +359,31 @@ $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
 //
 
+$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
 //
@@ -323,6 +404,7 @@ $tab-active-border:             $tab-border !default;
 $sidebar-width:                 270px !default;
 $sidebar-padding-vertical:      $padding-base-vertical !default;
 $sidebar-padding-horizontal:    $padding-side !default;
+$sidebar-width-computed:        $sidebar-width - ($sidebar-padding-horizontal * 2) - 1px !default;
 $sidebar-link-hover-bg:         $gray-lightest !default;
 $sidebar-link-active-bg:        $body-bg !default;
 $sidebar-link-active-border:    $gray-lighter !default;
@@ -362,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),
@@ -375,6 +459,7 @@ $panel-shadow:                  0 1px 2px rgba(#000, .1),
 //
 
 $tooltip-bg:                    #fff !default;
+$tooltip-border-width:          0 !default;
 $tooltip-border:                #ccc !default;
 $tooltip-text:                  $gray-dark !default;
 $tooltip-link:                  $link-color !default;
@@ -391,16 +476,17 @@ $issue-padding:                 15px !default;
 $issue-gravatar-size:           50px !default;
 $issue-heading-size:            1.5 !default;
 
-$issue-attribute-padding-v:     3px;
+$issue-attribute-padding-v:     3px !default;
-$issue-attribute-padding-h:     5px;
+$issue-attribute-padding-h:     5px !default;
 
 
 //== Speech "bubbles"
 //
-$bubble-gravatar-size:          24px;
+
-$bubble-gravatar-space:         12px;
+$bubble-gravatar-size:          24px !default;
-$bubble-padding-vertical:       8px;
+$bubble-gravatar-space:         12px !default;
-$bubble-padding-horizontal:     15px;
+$bubble-padding-vertical:       8px !default;
+$bubble-padding-horizontal:     15px !default;
 
 
 //== Media queries breakpoints
@@ -421,10 +507,12 @@ $screen-xs-max:                 ($screen-sm-min - 1) !default;
 $screen-sm-max:                 ($screen-md-min - 1) !default;
 $screen-md-max:                 ($screen-lg-min - 1) !default;
 
+$top-menu-collapse-breakpoint:  $screen-lg-min !default;
+
 
 //== Content widths
 //
 
-$width-sm:                      $screen-sm - ($padding-side * 2);
+$width-sm:                      $screen-sm - ($padding-side * 2) !default;
-$width-md:                      $screen-md - ($padding-side * 2);
+$width-md:                      $screen-md - ($padding-side * 2) !default;
-$width-lg:                      $screen-lg - ($padding-side * 2);
+$width-lg:                      $screen-lg - ($padding-side * 2) !default;

src/sass/application.scss

@@ -2,6 +2,8 @@
 @import "mixins";
 
 @import "lib/normalize";
+@import "lib/font-awesome";
+
 
 //== Redmine's core elements
 //
@@ -11,7 +13,6 @@
 @import "components/forms";
 @import "components/tabs";
 @import "components/pagination";
-@import "components/top";
 @import "components/content";
 @import "components/gravatar";
 @import "components/list";
@@ -27,8 +28,10 @@
 @import "components/elements";
 @import "components/jquery-ui";
 @import "components/icons";
+@import "components/top";
 @import "components/jstoolbar";
 @import "components/flash";
+@import "components/image-base64";
 @import "components/print";
 
 

src/sass/components/_admin.scss

@@ -15,7 +15,7 @@
 
     a {
       display: inline-block;
-            padding-left: 8 + 16px;
+      padding-left: 5px + 20px;
       background-position: 0 center;
     }
   }
@@ -24,7 +24,7 @@
     list-style-type: none;
 
     > a {
-            padding-left: $sidebar-padding-horizontal + 8 + 16px;
+      padding-left: $sidebar-padding-horizontal + 5px + 20px;
       background-repeat: no-repeat;
       background-position: $sidebar-padding-horizontal center;
     }
@@ -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 {
@@ -136,6 +129,6 @@ fieldset#notified_events {
   }
 
   td.scm_name {
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 }

src/sass/components/_base.scss

@@ -13,6 +13,7 @@ body {
   color: $text-color;
   font-family: $font-family-base;
   font-size: $font-size-base;
+  font-weight: $font-weight-normal;
   line-height: $line-height-base;
 }
 
@@ -80,6 +81,13 @@ small {
   font-size: $font-size-small;
 }
 
+table {
+  th,
+  td {
+    padding: $table-condensed-cell-padding $table-cell-padding;
+  }
+}
+
 ul,
 ol {
   margin-top: 0;
@@ -98,7 +106,7 @@ dl {
 
 dt {
   margin-top: $line-height-computed;
-    font-weight: bold;
+  font-weight: $font-weight-bold;
 }
 
 dd {
@@ -129,8 +137,7 @@ abbr[title] {
 blockquote {
   margin: 0 0 $line-height-computed;
   padding: floor($line-height-computed / 4) $padding-large-horizontal;
-    border-left: 4px solid $blockquote-border-color-fallback;
+  border-left: 4px solid $blockquote-border-color;
-    border-left-color: $blockquote-border-color;
 
   >:first-child {
     margin-top: 0;

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;
-    cursor: pointer;
   font-weight: $btn-font-weight;
   text-align: center;
   white-space: nowrap;
-    @include button-size($input-padding-vertical, $input-padding-horizontal, $font-size-base, $line-height-base, $border-radius-base);
+  cursor: pointer;
-    @include user-select(none);
+  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); // scss-lint:disable DeclarationOrder
-    @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
 
   &:hover,
   &:focus {
+    outline: 0;
     text-decoration: none;
   }
 
@@ -31,17 +34,15 @@ button {
   fieldset[disabled] & {
     pointer-events: none; // Future-proof disabling of clicks
     box-shadow: none;
-        @include opacity(.65);
+    opacity: .65;
   }
 }
 
 
-/**
+//== Form buttons layout
- * Issue form buttons layout
+//
- */
 
-#issue-form,
+form {
-#history .journal form {
   input[type="submit"] {
     margin-right: 5px;
 
@@ -51,83 +52,28 @@ button {
 
     + a {
       margin-right: 5px;
-        }
 
-        + a + a {
+      + a {
         margin-left: 5px;
       }
     }
   }
-
-
-/**
- * Project's repository form buttons layout
- */
-
-#repository-form {
-    input[type="submit"] {
-        margin-right: 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
- * New _something_ form buttons layout
+//
- */
-
-#add_attachment_form,
-#new_time_entry,
-#new_project,
-#new_document,
-#new_group,
-#new_user {
-    input[type="submit"] {
-        margin-right: 5px;
-
-        + input {
-            @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
-        }
-    }
-}
-
-
-/**
- * Wiki form buttons layout
- */
-
-#wiki_form {
-    input[type="submit"] {
-        margin-right: 5px;
-    }
-}
-
-
-/**
- * Forum and news message form buttons layout
- */
 
 #message-form,
 #news-form {
-    input[type="submit"] {
-        margin-right: 5px;
-
-        + a {
-            margin-right: 5px;
-        }
-
-        + a + a {
-            margin-left: 5px;
-        }
-    }
-
   #message_sticky,
   #message_locked {
     position: relative;
@@ -137,13 +83,77 @@ form[action*="repository/diff"] {
 }
 
 
-/**
+//== Button links
- * Query builder buttons
+//
- */
+
+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 {
-        width: auto !important;
+    width: auto !important; // scss-lint:disable ImportantRule
   }
 
   .buttons {
@@ -152,30 +162,31 @@ form[action*="repository/diff"] {
     input[type="button"] {
       width: 32px;
       margin-bottom: 4px;
-            @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
+      padding-right: 1px;
+      padding-left: 1px;
+      @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;
-    background-image: url("../images/bullet_toggle_plus.png");
   background-repeat: no-repeat;
   background-position: 2px 2px;
   cursor: pointer;
   vertical-align: top;
-    @include user-select(none);
+  user-select: none;
-    @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
 }
 
 a[data-expands] {
@@ -183,6 +194,12 @@ a[data-expands] {
   margin-right: 10px;
   padding: 10px;
 
+  > .toggle-multiselect {
+    padding: 0;
+    border: 0 none;
+    background: transparent;
+  }
+
   img {
     display: none;
   }

src/sass/components/_calendar.scss

@@ -49,7 +49,7 @@ table.cal {
       background: $highlight-bg;
 
       p.day-num {
-                font-weight: bold;
+        font-weight: $font-weight-bold;
       }
     }
   }

src/sass/components/_coderay.scss

@@ -18,6 +18,7 @@
   }
 
   .debug {
+    // scss-lint:disable ImportantRule
     background: #00f !important;
     color: #fff !important;
   }
@@ -52,7 +53,7 @@
 
   .class {
     color: #795da3;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   .class-variable {
@@ -86,7 +87,7 @@
 
   .definition {
     color: #099;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   .delimiter {
@@ -95,7 +96,7 @@
 
   .directive {
     color: #088;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   .doc {
@@ -104,7 +105,7 @@
 
   .doc-string {
     color: #d42;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   .doctype {
@@ -113,7 +114,7 @@
 
   .entity {
     color: #800;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   .error {
@@ -127,7 +128,7 @@
 
   .exception {
     color: #c00;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   .float {
@@ -136,7 +137,7 @@
 
   .function {
     color: #06b;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   .global-variable {
@@ -153,7 +154,7 @@
 
   .include {
     color: #b44;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   .inline {
@@ -163,7 +164,7 @@
 
   .inline-delimiter {
     color: #666;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   .instance-variable {
@@ -188,12 +189,12 @@
 
   .keyword {
     color: #b3113e;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   .label {
     color: #970;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   .local-variable {
@@ -202,7 +203,7 @@
 
   .namespace {
     color: #707;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   .octal {
@@ -219,7 +220,7 @@
 
   .predefined-type {
     color: #0a5;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   .preprocessor {
@@ -228,7 +229,7 @@
 
   .pseudo-class {
     color: #00c;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   .regexp {
@@ -249,7 +250,7 @@
 
   .reserved {
     color: #080;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   .shell {
@@ -288,7 +289,7 @@
 
   .type {
     color: #339;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   .value {
@@ -301,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);
@@ -339,25 +317,46 @@
       border-bottom-right-radius: 5px;
       background-color: hsla(120, 100%, 50%, .2);
     }
-
-        .insert {
-            background: transparent;
-            color: #0c0;
-            font-weight: bold;
-        }
   }
 
-    .delete .delete {
+  .delete {
+    background: hsla(0, 100%, 50%, .12);
+
+    .delete {
       background: transparent;
       color: #c00;
-        font-weight: bold;
+      font-weight: $font-weight-bold;
     }
 
-    .change .change {
+    .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);
+    }
+  }
+
+  .change {
+    background: #007;
+    color: #bbf;
+
+    .change {
       color: #88f;
     }
+  }
 
-    .head .head {
+  .head {
+    background: #505;
+    color: #f8f;
+
+    .head {
       color: #f4f;
     }
+
+    .filename {
+      color: #fff;
+    }
+  }
 }

src/sass/components/_content.scss

@@ -1,6 +1,10 @@
 #main {
+  @if $flexbox-layout {
+    display: flex;
+  } @else {
     @extend %clearfix;
   }
+}
 
 
 //
@@ -9,8 +13,15 @@
 
 #content {
   padding: $padding-side;
+
+  @if $flexbox-layout {
+    $side-space: $sidebar-width + $padding-side * 2;
+    flex: 1 1 auto;
+    width: calc(100% - #{$side-space});
+  } @else {
     overflow: hidden;
   }
+}
 
 
 //
@@ -18,39 +29,47 @@
 // --------------------------------------------------
 
 #sidebar {
-    width: $sidebar-width - ($sidebar-padding-horizontal * 2) - 1px;
   padding: $padding-side $sidebar-padding-horizontal;
-    float: $sidebar-position;
 
-    @media screen and (min-width: 1px) {
+  @if $flexbox-layout {
-        // scss-lint:disable VendorPrefixes
+    flex: 0 0 $sidebar-width-computed;
-        $border: $sidebar-link-active-border;
-        $body:   $body-bg;
-
-        padding-bottom: $padding-side * 3;
-        background-image: -webkit-linear-gradient($body 1%, $border 10%, $border 85%, $body);
-        background-image:      -o-linear-gradient($body 1%, $border 10%, $border 85%, $body);
-        background-image:         linear-gradient($body 1%, $border 10%, $border 85%, $body);
-        background-repeat: no-repeat;
-        background-size: 1px 100%;
 
     @if $sidebar-position == "left" {
-            padding-right: $sidebar-padding-horizontal + 1px;
+      order: -1;
-            background-position: right 0;
+    } @else {
+      order: 1;
+    }
+  } @else {
+    width: $sidebar-width-computed;
+    float: $sidebar-position;
+  }
+
+  @media screen and (min-width: 1px) {
+    @if not $flexbox-layout {
+      padding-bottom: $padding-side * 3;
+    }
+
+    @if $sidebar-position == "left" {
+      border-right: 1px solid $sidebar-link-active-border;
       box-shadow: inset -9px 0 6px -6px rgba(0, 0, 0, .05);
     } @else {
-            padding-left: $sidebar-padding-horizontal + 1px;
+      border-left: 1px solid $sidebar-link-active-border;
-            background-position: left 0;
       box-shadow: inset 9px 0 6px -6px rgba(0, 0, 0, .05);
     }
   }
 
   .nosidebar & {
-        width: 0;
     margin: 0;
     padding: 0;
+    border: 0 none;
+
+    @if $flexbox-layout {
+      flex: 0 0 auto;
+    } @else {
+      width: 0;
       float: none;
     }
+  }
 
   h3 {
     margin-top: $line-height-computed * 1.5;
@@ -117,7 +136,7 @@
 }
 
 #footer {
-    margin: $line-height-computed $padding-side;
+  margin: 0 $padding-side $line-height-computed;
   padding-top: $line-height-computed;
   border-top: 1px solid $gray-lighter;
   color: $gray-light;

src/sass/components/_elements.scss

@@ -3,87 +3,90 @@
 // --------------------------------------------------
 
 
-/**
+//== Collapsible
- * 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: "/ ";
-    }
-}
-
-
-/**
- * Collapsible
- */
 
 a.collapsible,
 .collapsible > legend {
-    cursor: pointer;
   color: $link-color;
-    @include user-select(none);
+  cursor: pointer;
+  user-select: none;
 
   &:hover {
     color: $link-hover-color;
   }
 
-    &:before {
+  &::before {
     display: inline-block;
     position: relative;
     top: -1px;
     width: 0;
     height: 0;
     margin-right: 3px;
-        border-top:   5px solid;
+    transform: rotate(0);
-        border-right: 5px solid transparent;
+    border-top:   6px solid;
-        border-left:  5px solid transparent;
+    border-right: 4px solid transparent;
+    border-left:  4px solid transparent;
     content: "";
     vertical-align: middle;
-        @include rotate(0);
+
-        @include transition-transform(.1s);
+    @if $collapsible-animation-time > 0 {
+      transition: transform $collapsible-animation-time;
+    }
   }
 }
 
 a.collapsible.collapsed,
 .collapsible.collapsed > legend {
-    &:before {
+  &::before {
-        @include rotate(-90deg);
+    transform: rotate(-90deg);
+  }
+}
+
+@if $collapsible-animation-time > 0 {
+  fieldset.collapsible {
+    min-height: $line-height-computed;
+    max-height: 2500px; // should be enough with all the possible filters
+    transition: max-height $collapsible-animation-time ease-out;
+    overflow: hidden;
+
+    > div {
+      display: block !important; // scss-lint:disable ImportantRule
+      transition: visibility 0s 0s, opacity $collapsible-animation-time;
+      opacity: 1;
+      visibility: visible;
+    }
+
+    &.collapsed {
+      max-height: 0;
+      transition: max-height $collapsible-animation-time;
+
+      > div {
+        transition: visibility 0s $collapsible-animation-time, opacity $collapsible-animation-time;
+        opacity: 0;
+        visibility: hidden;
+      }
+    }
   }
 }
 
 
-/**
+//== Elements with context menus (doesn't really work on Windows)
- * Elements with context menus (doesn't really work on Windows)
+//
- */
 
 .hascontextmenu {
   cursor: context-menu;
 }
 
 
-/**
+//== Actions for block
- * Actions for block
+//
- */
 
 .contextual {
   padding-left: $padding-base-vertical;
   float: right;
-    cursor: default;
   white-space: nowrap;
+  cursor: default;
 
   input,
   select {
@@ -91,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;
@@ -106,9 +115,8 @@ a.collapsible.collapsed,
 }
 
 
-/**
+//== Responsive autoscroll
- * Responsive autoscroll
+//
- */
 
 .autoscroll {
   overflow-x: auto;
@@ -116,9 +124,8 @@ a.collapsible.collapsed,
 }
 
 
-/**
+//== Container
- * Container
+//
- */
 
 .box {
   margin-bottom: $line-height-computed;
@@ -135,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;
@@ -149,7 +164,7 @@ a.collapsible.collapsed,
 .splitcontentleft,
 .splitcontentright {
   width: 50%;
-    @include box-sizing(border-box);
+  box-sizing: border-box;
 }
 
 .splitcontentleft {
@@ -163,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 {
@@ -190,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;
@@ -227,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);
@@ -238,18 +250,8 @@ p.subtitle {
 }
 
 
-/**
+//== My page layout
- * Breadcrumbs (can be seen in time entries report)
+//
- * No need to style them, but let this selector be here.
- */
-
-// p.breadcrumb {
-// }
-
-
-/**
- * My page layout
- */
 
 #block-form {
   display: inline;
@@ -282,12 +284,12 @@ p.subtitle {
   &.ui-sortable-placeholder {
     outline: 1px dashed $highlight-border;
     background: $highlight-bg;
-        visibility: visible !important;
+    visibility: visible !important; // scss-lint:disable ImportantRule
   }
 
   &.ui-sortable-helper {
+    @include nice-shadow(4);
     background: $body-bg;
-        box-shadow: $panel-shadow;
   }
 }
 
@@ -311,22 +313,63 @@ a.close-icon {
 }
 
 
-/**
+//== Resetting font for SCM (repository files)
- * Resetting font for SCM (repository files)
+//
- */
+
 #content table.filecontent {
   width: 100%;
+  background: $body-bg;
+
+  th.filename {
+    border-color: $brand-primary;
+    border-bottom-color: darken($body-bg, 10%);
+    background-color: $brand-primary;
+    color: $brand-text;
+  }
+
+  tbody {
+    font-size: $font-size-list;
+  }
 
   tbody,
   td.line-code pre {
     font-family: $font-family-monospace;
   }
 
-    td.line-code {
+  th.line-num {
-        padding: 2px 5px;
+    border-color: darken($body-bg, 10%);
+    background-color: darken($body-bg, 5%);
+    color: $gray;
+  }
 
-        pre {
+  th.line-num,
-            font-size: 13px;
+  td.line-code {
+    padding: .15em .4em;
+  }
+
+  th.line-num,
+  td.line-code,
+  td.line-code pre {
+    font-size: 1em;
+  }
+
+  tr:hover {
+    background-color: darken($body-bg, 2%);
+
+    th.line-num {
+      background-color: darken($body-bg, 10%);
+    }
+  }
+
+  tr:target {
+    th.line-num {
+      border-color: darken(adjust-hue($highlight-bg, -8deg), 15%);
+      background-color: darken(adjust-hue($highlight-bg, -8deg), 7%);
+      color: $highlight-text;
+    }
+
+    td.line-code {
+      background-color: $highlight-bg;
     }
   }
 }
@@ -345,9 +388,8 @@ a.close-icon {
 }
 
 
-/**
+//== Projects list
- * Projects list
+//
- */
 
 ul.projects {
   padding-left: $padding-side;
@@ -377,7 +419,7 @@ ul.projects {
 
   a.project {
     font-size: $font-size-h3;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
 
     &.child {
       font-weight: normal;
@@ -401,15 +443,10 @@ ul.projects {
 }
 
 
-/**
+//== Time report
- * Time report
+//
- */
-
-table#time-report {
-    td.hours {
-        text-align: right;
-    }
 
+#time-report {
   th {
     &.period,
     &.total {
@@ -430,17 +467,17 @@ table#time-report {
     &.total {
       border-top: 2px solid darken($table-border-color, 5%);
       background-color: $table-bg-active;
-            font-weight: bold;
+      font-weight: $font-weight-bold;
     }
   }
 
-    .hours-dec {
+  td.hours {
-        font-size: .9em;
+    text-align: right;
   }
 }
 
 .total-hours {
-    font-weight: bold;
+  font-weight: $font-weight-bold;
 
   .hours-int {
     font-size: $font-size-large * 1.1;
@@ -452,9 +489,8 @@ table#time-report {
 }
 
 
-/**
+//== Version issue list and page layout
- * Version issue list and page layout
+//
- */
 
 div#roadmap {
   .related-issues {
@@ -508,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%;
@@ -533,9 +569,8 @@ div#version-summary {
   border: 1px solid $highlight-border;
   background-color: $highlight-bg;
   color: $highlight-text;
-    font-weight: bold;
+  font-weight: $font-weight-bold;
   text-align: center;
-    box-shadow: $panel-shadow;
   opacity: .9;
   z-index: 100;
 
@@ -549,9 +584,8 @@ div#version-summary {
 }
 
 
-/**
+//== Boards (forum)
- * Boards (forum)
+//
- */
 
 tr.message {
   &.locked {
@@ -559,7 +593,7 @@ tr.message {
   }
 
   &.sticky td.subject {
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   td {
@@ -573,7 +607,7 @@ tr.message {
       white-space: nowrap;
 
       a:last-child {
-                font-weight: bold;
+        font-weight: $font-weight-bold;
       }
     }
   }
@@ -587,16 +621,21 @@ table.boards {
       white-space: nowrap;
 
       a:last-child {
-                font-weight: bold;
+        font-weight: $font-weight-bold;
       }
     }
   }
 }
 
+div.table-list.boards {
+  .table-list-cell.name {
+    width: 30%;
+  }
+}
 
-/**
+
- * Topic page
+//== Topic page
- */
+//
 
 .controller-messages.action-show {
   h2 {
@@ -620,7 +659,7 @@ table.boards {
         color: $gray-darker;
 
         &.user {
-                    font-weight: bold;
+          font-weight: $font-weight-bold;
         }
       }
     }
@@ -659,8 +698,8 @@ table.boards {
       > h4 {
         position: relative;
 
-                &:before,
+        &::before,
-                &:after {
+        &::after {
           display: block;
           position: absolute;
           top: 9px;
@@ -674,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;
         }
@@ -701,9 +740,31 @@ table.boards {
 }
 
 
-/**
+//== News
- * News comments
+//
- */
+
+.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 {
@@ -721,9 +782,8 @@ table.boards {
 }
 
 
-/**
+//== Diff
- * Diff
+//
- */
 
 .text-diff {
   margin-bottom: $line-height-computed;
@@ -751,19 +811,35 @@ table.boards {
 }
 
 
-/**
+//== Repository view
- * Repository view
+//
- */
 
-#revision_selector {
+.revision-info {
-    display: inline;
+  margin-bottom: $line-height-computed;
+
+  tbody > tr > td {
+    padding-right: $table-cell-padding;
+    padding-bottom: $table-condensed-cell-padding;
+
+    + td {
+      font-family: $font-family-monospace;
+    }
+  }
 }
 
 #related-issues {
-    li img {
+  margin: $line-height-computed 0;
+
+  li > a {
+    margin-left: .5em;
+
+    @if $use-font-awesome == false {
+      img {
         vertical-align: middle;
       }
     }
+  }
+}
 
 ul.properties {
   padding: 0;
@@ -785,6 +861,10 @@ tr.changeset {
     background-color: #fffffb;
   }
 
+  td.id {
+    font-family: $font-family-monospace;
+  }
+
   td.author,
   td.committed_on {
     width: 15%;
@@ -803,3 +883,52 @@ tr.changeset {
     margin-bottom: 0;
   }
 }
+
+#content #changes-legend {
+  font-size: 1em;
+
+  .change {
+    background-position: 5px center;
+  }
+
+  .change-A { color: $changeset-add-color; }
+  .change-M { color: $changeset-modified-color; }
+  .change-C { color: $changeset-copied-color; }
+  .change-R { color: $changeset-renamed-color; }
+  .change-D { color: $changeset-deleted-color; }
+}
+
+.changeset-changes {
+  .change {
+    padding-top: $table-condensed-cell-padding;
+    color: $gray-dark;
+
+    a {
+      @include link-variant($gray-dark);
+    }
+  }
+
+  .change-A {
+    &::before { color: $changeset-add-color; }
+    a { @include link-variant($changeset-add-color); }
+  }
+
+  .change-M {
+    &::before { color: $changeset-modified-color; }
+    a { @include link-variant($changeset-modified-color); }
+  }
+
+  .change-C {
+    &::before { color: $changeset-copied-color; }
+    a { @include link-variant($changeset-copied-color); }
+  }
+
+  .change-R {
+    &::before { color: $changeset-renamed-color; }
+    a { @include link-variant($changeset-renamed-color); }
+  }
+
+  .change-D {
+    color: $changeset-deleted-color;
+  }
+}

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,
+  >:last-child {
-    ol:last-child,
-    ul:last-child {
     margin-bottom: 0;
   }
 }
@@ -40,11 +38,15 @@
   border-color: $border;
 
   @if $use-font-awesome {
-        @if     $icon == "true"        { $icon: $fa-var-check; }
+    @if $icon == "true" {
-        @elseif $icon == "warning"     { $icon: $fa-var-warning; }
+      $icon: $fa-var-check;
-        @elseif $icon == "exclamation" { $icon: $fa-var-exclamation-circle; }
+    } @elseif $icon == "warning" {
+      $icon: $fa-var-warning;
+    } @elseif $icon == "exclamation" {
+      $icon: $fa-var-exclamation-circle;
+    }
 
-        &:before {
+    &::before {
       content: $icon;
     }
   } @else {
@@ -53,7 +55,7 @@
 
   a {
     color: $link;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 }
 
@@ -77,7 +79,7 @@
   text-align: center;
 
   @if $use-font-awesome {
-        &:before {
+    &::before {
       margin-left: 0;
       float: none;
     }

src/sass/components/_forms.scss

@@ -3,11 +3,13 @@
 // --------------------------------------------------
 
 form {
-    // display: inline;
-
   td {
     padding: $table-condensed-cell-padding;
   }
+
+  .contextual > & {
+    display: inline;
+  }
 }
 
 button,
@@ -17,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"],
@@ -32,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],
@@ -62,6 +62,11 @@ input[type="password"] {
 textarea {
   resize: vertical;
   height: auto;
+
+  &.text_cf {
+    width: 100%;
+    resize: vertical;
+  }
 }
 
 input[type="search"] {
@@ -84,9 +89,10 @@ input[type="range"] {
   width: 100%;
 }
 
-input.autocomplete {
+input {
+  &.autocomplete {
+    @extend %image-aci;
     padding-right: 30px;
-    background-image: url("../images/aci.png"); /* autocomplete indicator */
     background-repeat: no-repeat;
     background-position: right center;
 
@@ -95,6 +101,12 @@ input.autocomplete {
     }
   }
 
+  &.string_cf,
+  &.link_cf {
+    width: 100%;
+  }
+}
+
 select {
   &[multiple],
   &[size] {
@@ -108,29 +120,44 @@ select {
   option[disabled] {
     color: $gray-lighter;
   }
+
+  &.expandable {
+    vertical-align: top;
   }
 
-/**
+  &.bool_cf {
- * Browser hacks: unfortunately every browser has different capabilities when it
+    width: auto !important; // scss-lint:disable ImportantRule
- * 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] {
       padding: 0;
     }
 
-        option {
+    option,
+    optgroup::before {
       padding: $input-padding-vertical $input-padding-horizontal;
       border-bottom: 1px dotted $gray-lighter;
     }
+
+    optgroup > option {
+      padding-right: $input-padding-horizontal * 2;
+      padding-left: $input-padding-horizontal * 2;
+    }
   }
 }
 
 // Google Chrome and Safari
+
 @supports (-webkit-appearance: none) {
   select[multiple] {
     padding: 0;
@@ -148,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 {
@@ -166,9 +193,8 @@ legend {
 }
 
 
-/**
+//== Required fields' asterisk
- * Required fields' asterisk
+//
- */
 
 span.required {
   position: relative;
@@ -181,9 +207,8 @@ span.required {
 }
 
 
-/**
+//== Field's hint
- * Field's hint
+//
- */
 
 em.info {
   display: block;
@@ -194,9 +219,9 @@ em.info {
 }
 
 
-/**
+//== Wiki editor
- * Wiki editor
+//
- */
+
 .wiki-edit {
   color: $wiki-text;
   font-family: $font-family-monospace;
@@ -204,9 +229,8 @@ em.info {
 }
 
 
-/**
+//== Tabular forms
- * Tabular forms
+//
- */
 
 .tabular {
   &.settings {
@@ -221,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;
@@ -260,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;
@@ -275,19 +299,12 @@ em.info {
       margin-left: 0;
       padding-left: 16px;
       float: none;
-            cursor: pointer;
       text-align: left;
-
+      cursor: pointer;
-            > input {
-                margin-top: 0;
-                margin-left: -16px;
-                float: left;
-            }
     }
 
     &.inline {
       display: inline-block;
-            margin-right: 10px;
     }
 
     &.role-visibility {
@@ -301,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;
@@ -315,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,
@@ -342,27 +380,10 @@ label[for=closed] {
 #my_account_form select,
 #user_form select,
 #user_identity_url,
-#custom_field_possible_values,
+#custom_field_possible_values {
-#custom_field_default_value {
   width: 100%;
 }
 
-textarea.text_cf {
-    width: 100%;
-    resize: vertical;
-}
-
-input {
-    &.string_cf,
-    &.link_cf {
-        width: 100%;
-    }
-}
-
-select.bool_cf {
-    width: auto !important;
-}
-
 @if $issue-subject-large {
   $input-padding-large-vertical:   8px;
   $input-padding-large-horizontal: 12px;
@@ -381,18 +402,28 @@ select.bool_cf {
   }
 }
 
-/**
+//== Add space below WYSIWYG
- * Add space below WYSIWYG
+//
- */
 
 .jstEditor {
   margin-bottom: $line-height-computed / 2;
 }
 
+//== User form
+//
 
-/**
+#user_form {
- * Attachments
+  @extend %clearfix;
- */
+  margin-bottom: $line-height-computed;
+
+  ~ p {
+    margin-bottom: 0;
+  }
+}
+
+
+//== Attachments
+//
 
 #attachments_fields {
   > span {
@@ -404,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");
@@ -436,9 +467,8 @@ select.bool_cf {
 }
 
 
-/**
+//== Issue form elements
- * Issue form elements
+//
- */
 
 #issue-form {
   fieldset {
@@ -450,9 +480,7 @@ select.bool_cf {
       }
     }
   }
-}
 
-#all_attributes {
   .splitcontentleft,
   .splitcontentright {
     width: 100%;
@@ -486,15 +514,18 @@ select.bool_cf {
     padding-left: .2em;
     text-align: right;
   }
+}
 
-    /**
+
-     * Hack: first <p> in issue form ("private" option) is moved to the right with
+//== #all_attributes > p[style] is targeting Redmine 2.x
-     * inline styles. Don't allow it break the layout
+//
-     */
+
-    > p[style] {
+#issue_is_private_wrap,
-        margin-right: 0 !important;
+#all_attributes > p[style] {
+  margin-right: 0 !important; // scss-lint:disable ImportantRule
   margin-bottom: 0;
   padding-left: 0;
+  float: right;
 
   input {
     top: 2px;
@@ -505,7 +536,6 @@ select.bool_cf {
     padding-left: 0;
   }
 }
-}
 
 
 #watchers_form {
@@ -515,24 +545,21 @@ select.bool_cf {
     display: block;
   }
 
-    // scss-lint:disable VendorPrefixes
   #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;
@@ -541,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;
@@ -561,11 +587,11 @@ select.bool_cf {
 
   &.bool_cf {
     label {
+      @extend %clearfix;
       display: inline-block;
       margin-right: 10px;
       padding-left: 20px;
-            @include user-select(none);
+      user-select: none;
-            @extend %clearfix;
 
       input[type="checkbox"],
       input[type="radio"] {
@@ -578,9 +604,8 @@ select.bool_cf {
 }
 
 
-/**
+//== Filters
- * Filters
+//
- */
 
 fieldset#filters {
   table {
@@ -589,6 +614,10 @@ fieldset#filters {
     }
   }
 
+  .add-filter {
+    text-align: right;
+  }
+
   td {
     &.field {
       min-width: 180px;
@@ -614,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;

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;
   }
 }
 
@@ -41,7 +41,33 @@
 
     &.project,
     &.version {
-            font-weight: bold;
+      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;
+      }
     }
   }
 }
@@ -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,
@@ -115,36 +115,20 @@
   }
 }
 
-.version-behind-schedule a,
+.version-behind-schedule,
-.issue-behind-schedule a {
+.issue-behind-schedule {
   color: $brand-warning;
-
-    @if $color-trackers {
-        &.issue {
-            background-color: $brand-warning;
-            color: $brand-text;
-            font-weight: 700;
-        }
-    }
 }
 
-.version-overdue a,
+.version-overdue,
-.issue-overdue a,
+.issue-overdue,
-.project-overdue a {
+.project-overdue {
   color: $brand-danger;
-
-    @if $color-trackers {
-        &.issue {
-            background-color: $brand-danger;
-            color: $brand-text;
-            font-weight: 700;
-        }
-    }
 }
 
-/**
+
- * Tooltips
+//== Tooltips
- */
+//
 
 .tooltip {
   position: relative;
@@ -152,21 +136,25 @@
 
   &:hover {
     z-index: 25;
+
+    .tip {
+      display: block;
+    }
   }
 
   .tip {
+    @include nice-shadow(3);
     display: none;
     position: absolute;
     top: 9px;
     left: 24px;
     width: 270px;
     padding: $padding-base-vertical;
-        border: 1px solid $tooltip-border;
+    border: $tooltip-border-width solid $tooltip-border;
     background-color: $tooltip-bg;
     color: $tooltip-text;
     font-size: $font-size-small;
     text-align: left;
-        box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
   }
 
   @if $sidebar-position == "left" {
@@ -177,10 +165,4 @@
       }
     }
   }
-
-    &:hover {
-        .tip {
-            display: block;
-        }
-    }
 }

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;

src/sass/components/_image-base64.scss

@@ -0,0 +1,44 @@
+//
+// Base64 encoded images
+// --------------------------------------------------
+
+// ACI = AutoComplete Indicator
+%image-aci {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAKBAMAAAAnY0GXAAAAD1BMVEUAAACzs7Ozs7Ozs7Ozs7NJvZFvAAAABHRSTlMA5kpJG2qUMwAAABtJREFUCNdjIBMYCkMRDIg4QhBuAUUhKCIPAAAlaQNk5qF21gAAAABJRU5ErkJggg==);
+}
+
+%image-arrow-up {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAACHRSTlMAgFIFe2wwFmA2CKQAAAArSURBVAjXYyASGBlAGYoKEJpNUAzCKBEUKQDRzIGCgsEgBpOgoKAQA5kAAOOzAuqv1pGxAAAAAElFTkSuQmCC);
+}
+
+%image-arrow-right {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAG1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACUUeIgAAAACXRSTlMAgF1mUUUMBwa6cf6pAAAAIklEQVQI12PADwJgDBEYQ1ADxhBOgDIEFdBF1GG6EOYQCQC/wwKE7b2bNAAAAABJRU5ErkJggg==);
+}
+
+%image-arrow-down {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAACHRSTlMAgFIFbDAWVn1ccuIAAAAsSURBVAjXYyANMAkKCgqBGMyOgoLOYKFEQcEEMINVUBSqSlEByjA3YCARAADFOwKnW3vw7AAAAABJRU5ErkJggg==);
+}
+
+%image-arrow-left {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAACHRSTlMAgF1mUUUMBtml7EIAAAAjSURBVAjXYyAAWGEMRyhdJAih2QyhDCZBhAhcDVwXwhziAACuywJHmKAVPgAAAABJRU5ErkJggg==);
+}
+
+%image-arrow-up-white {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAYUlEQVR4Xu2SMQqAMAxFVUxOID2FQ+9R3cRjesX4A5lCoaUFB2nhkeQPLxQyi8jU8xbwYwGBC1CrIIFda4sgKq6vFgS/1eZQI2BwZ/5NlnNJcIAtt8ny04ermx/l4zsYgheccgigTIfmMAAAAABJRU5ErkJggg==);
+}
+
+%image-arrow-down-white {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAG1BMVEUAAAD////////////////////////////////rTT7CAAAACXRSTlMAgFIFbBZWMTBl3YBFAAAALElEQVQI12MgDTAJCgoKgRjMjoKCzmChQEHBADCDQ1AcqkpRAcowM2AgEQAAvM4CiwrixCQAAAAASUVORK5CYII=);
+}
+
+%image-calendar {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOBAMAAADtZjDiAAAAIVBMVEUAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVUMftYpAAAACnRSTlMArIDn/dahwzIKIC4f+wAAADxJREFUCNdjYEhJACEGBk8HEGIQXrDYeMFiAYZVK1YB0QKGVSAApBcwMQgwMSDohaKChqKCxItXgc0pAADUBx5bh1ZBCgAAAABJRU5ErkJggg==);
+}
+
+%image-toggle-minus {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMAgJsrThgAAAAQSURBVAjXY8AK+D+AEDYAAC8fAf+FxiPoAAAAAElFTkSuQmCC);
+}
+
+%image-toggle-plus {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMAgJsrThgAAAAVSURBVAjXY0AGjA1QxP8BiBBcJAAAdjIFBZTfDZQAAAAASUVORK5CYII=);
+}

src/sass/components/_issue.scss

@@ -2,7 +2,8 @@
 // Issue page
 // --------------------------------------------------
 
-.issue.details {
+.issue {
+  &.details {
     margin-bottom: $line-height-computed;
     padding: $issue-padding;
     border: 1px solid $issue-border;
@@ -11,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;
@@ -21,7 +21,7 @@
         float: left;
       }
 
-        table img.gravatar {
+      .assigned-to img.gravatar {
         position: relative;
         top: -3px;
         margin-right: 5px;
@@ -35,7 +35,7 @@
 
     &.assigned-to-me {
       .assigned-to .user {
-            font-weight: bold;
+        font-weight: $font-weight-bold;
       }
     }
 
@@ -44,7 +44,7 @@
         margin-bottom: .3em;
         color: $gray-darkest;
         font-size: $issue-heading-size * 1em;
-            font-weight: bold;
+        font-weight: $font-weight-bold;
         line-height: 1.2;
       }
 
@@ -81,21 +81,141 @@
     }
   }
 
-div.fileover {
+  .attributes {
-    background-color: $highlight-bg;
+    width: 100%;
+
+    th,
+    td {
+      padding: $issue-attribute-padding-v $issue-attribute-padding-h $issue-attribute-padding-v 0;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    > tbody > tr {
+      th {
+        font-weight: normal;
+      }
+
+      td {
+        color: $gray-darkest;
+      }
+    }
+
+    @media screen and (min-width: $screen-md-min) {
+      > tbody > tr {
+        > th,
+        > td {
+          width: 25%;
+        }
+      }
+    }
+
+    @media screen and (min-width: $screen-lg-min) {
+      width: auto;
+
+      > tbody > tr {
+        > th {
+          width: 14em;
+        }
+
+        > td {
+          width: auto;
+          min-width: 16em;
+        }
+      }
+    }
+  }
+
+  @if $color-status {
+    .attributes td.status,
+    .attribute.status .value {
+      display: inline-block;
+      width: auto;
+      min-width: 1em;
+      margin-top: $issue-attribute-padding-v;
+      padding: 1px $table-cell-padding;
+      border-radius: $border-radius-base;
+      background-color: $brand-primary;
+      color: $brand-text;
+      font-size: $font-size-small;
+      font-weight: $font-weight-bold;
+      text-align: center;
+      text-transform: uppercase;
+    }
+
+    &.status-1 {
+      .attributes td.status,
+      .attribute.status .value {
+        background-color: $brand-info;
+      }
+    }
+
+    &.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);
     padding: $issue-padding;
+  }
+}
+
+div.fileover {
+  background-color: $highlight-bg;
+}
+
+div.attachments {
+  padding: $line-height-computed 0;
   border-top: 1px solid $issue-border;
 
   p {
     margin: 10px 0 0;
-
-        &:first-child {
-            margin-top: 0;
   }
+
+  p:first-child,
+  .contextual + p {
+    margin-top: 0;
   }
 
   img {
@@ -181,74 +301,6 @@ div.thumbnails {
   }
 }
 
-table.attributes {
-    width: 100%;
-
-    th,
-    td {
-        padding: $issue-attribute-padding-v $issue-attribute-padding-h $issue-attribute-padding-v 0;
-        text-align: left;
-        vertical-align: top;
-    }
-
-    > tbody > tr {
-        th {
-            font-weight: normal;
-        }
-
-        td {
-            color: $gray-darkest;
-        }
-    }
-
-    @media screen and (min-width: $screen-md-min) {
-        > tbody > tr {
-            > th,
-            > td {
-                width: 25%;
-            }
-        }
-    }
-
-    @media screen and (min-width: $screen-lg-min) {
-        width: auto;
-        min-width: $screen-sm-min;
-
-        > tbody > tr {
-            > th {
-                width: 14em;
-            }
-
-            > td {
-                width: auto;
-            }
-        }
-    }
-}
-
-@if $color-status {
-    .attributes td.status {
-        display: inline-block;
-        width: auto;
-        margin-top: $issue-attribute-padding-v;
-        padding: 1px $table-cell-padding;
-        border-radius: $border-radius-base;
-        background-color: $brand-primary;
-        color: $brand-text;
-        font-size: $font-size-small;
-        font-weight: bold;
-        text-transform: uppercase;
-
-        .status-1 & {
-            background-color: $brand-info;
-        }
-
-        .closed & {
-            background-color: $brand-danger;
-        }
-    }
-}
-
 #new-relation-form {
   text-align: right;
 
@@ -271,7 +323,7 @@ table.attributes {
   &.hide-details {
     .journal,
     .details,
-        .first-of-notes:before {
+    .first-of-notes::before {
       display: none;
     }
 
@@ -283,7 +335,7 @@ table.attributes {
   &.hide-notes {
     .journal,
     .wiki,
-        .first-of-details:before {
+    .first-of-details::before {
       display: none;
     }
 
@@ -301,7 +353,7 @@ table.attributes {
     margin-left: $bubble-gravatar-size + $bubble-gravatar-space;
   }
 
-    &:before {
+  &::before {
     display: block;
     position: absolute;
     top: -($line-height-computed + 2px);
@@ -313,7 +365,7 @@ table.attributes {
     z-index: -1;
   }
 
-    .tabs + &:before {
+  .tabs + &::before {
     display: none;
   }
 
@@ -325,7 +377,7 @@ table.attributes {
       border-color: darken($issue-border, 25%);
 
       @if $use-gravatars {
-                h4:before {
+        h4::before {
           border-right-color: darken($issue-border, 25%);
         }
       }
@@ -344,7 +396,7 @@ table.attributes {
       color: $gray-darker;
 
       &.user {
-                font-weight: bold;
+        font-weight: $font-weight-bold;
       }
     }
 
@@ -357,8 +409,8 @@ table.attributes {
     h4 {
       position: relative;
 
-            &:before,
+      &::before,
-            &:after {
+      &::after {
         display: block;
         position: absolute;
         top: 9px;
@@ -372,14 +424,14 @@ table.attributes {
         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;
       }
@@ -408,7 +460,7 @@ table.attributes {
         margin-bottom: 0;
       }
 
-            &:before {
+      &::before {
         display: block;
         position: absolute;
         top: 5px;
@@ -426,6 +478,15 @@ table.attributes {
     }
   }
 
+  .thumbnails {
+    margin: 0;
+    padding: 0 $bubble-padding-horizontal $bubble-padding-vertical;
+
+    img {
+      vertical-align: middle;
+    }
+  }
+
   .wiki,
   form {
     padding: $issue-padding;
@@ -463,13 +524,13 @@ table.attributes {
 
   del > i:first-of-type,
   i:first-of-type {
-        background-color: mix($body-bg, $diff-out-bg, 64%);
+    background-color: $journal-old-value-bg;
-        color: $diff-out-color;
+    color: $journal-old-value-color;
   }
 
   i:last-of-type {
-        background-color: mix($body-bg, $diff-in-bg, 64%);
+    background-color: $journal-new-value-bg;
-        color: $diff-in-color;
+    color: $journal-new-value-color;
   }
 }
 
@@ -477,7 +538,7 @@ table.attributes {
   > div {
     border-left-color: $brand-warning;
 
-        h4:before {
+    h4::before {
       border-right-color: $brand-warning;
     }
   }
@@ -498,7 +559,7 @@ span.private {
   background: $brand-warning;
   color: $brand-text;
   font-size: $font-size-small;
-    font-weight: bold;
+  font-weight: $font-weight-bold;
   text-transform: uppercase;
 }
 
@@ -513,31 +574,49 @@ span.private {
 
   @media screen and (min-width: $screen-lg-min) {
     width: 33%;
-    }
+    min-width: 28em;
-
-    .odd {
-        background-color: $issue-bg;
   }
 
   div.changeset {
-        padding: $bubble-padding-vertical $bubble-padding-horizontal;
+    margin-top: $line-height-computed / 2 + 2px * 2;
     border: 1px solid $issue-border;
+    border-radius: $panel-border-radius;
+    background-color: $issue-bg;
+    font-size: $font-size-list;
+    overflow: hidden;
 
     &:first-of-type {
-            border-radius: $panel-border-radius $panel-border-radius 0 0;
+      margin-top: 0;
-        }
-
-
-        &:last-of-type {
-            border-radius: 0 0 $panel-border-radius $panel-border-radius;
     }
 
     > p {
-            font-size: $font-size-list;
+      @include clearfix;
+      margin: 0;
+      padding: $padding-base-vertical $padding-base-horizontal;
+      color: $gray;
+
+      > a {
+        font-family: $font-family-monospace;
+        font-weight: $font-weight-bold;
       }
 
-        + div.changeset {
+      .author a {
-            border-top: 0 none;
+        color: $gray-darker;
+
+        &.user {
+          font-weight: $font-weight-bold;
+        }
+      }
+
+      > br {
+        display: none;
+      }
+    }
+
+    > .wiki {
+      padding: $padding-base-vertical $padding-base-horizontal;
+      border-top: 1px solid mix($body-bg, $issue-border, 50%);
+      background-color: $body-bg;
     }
   }
 }

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;
@@ -37,7 +35,7 @@
   border: 0 none;
   background: $header-bg;
   color: $header-text;
-    font-weight: bold;
+  font-weight: $font-weight-bold;
 
   a {
     color: $header-text;
@@ -64,9 +62,8 @@
 }
 
 
-/**
+//== Interaction states
- * Interaction states
+//
- */
 
 .ui-state-default,
 .ui-widget-content .ui-state-default,
@@ -129,15 +126,18 @@
   text-decoration: none;
 }
 
+.ui-sortable-helper {
+  @include nice-shadow(4);
+}
 
-/**
+
- * Menu (e.g. autocomplete)
+//== Menu (e.g. autocomplete)
- */
+//
 
 .ui-menu {
+  @include nice-shadow(2);
   padding: 3px;
   border-radius: $panel-border-radius;
-    box-shadow: $panel-shadow;
 }
 
 .ui-menu-item {
@@ -145,9 +145,8 @@
 }
 
 
-/**
+//== Dialogs
- * Dialogs
+//
- */
 
 .modal {
   background: $body-bg;
@@ -165,14 +164,22 @@
 
 .ui-dialog {
   &.ui-widget-content {
+    @include nice-shadow(5);
     padding: 3px;
     border: 0 none;
-        box-shadow: $panel-shadow;
+  }
+
+  .ui-dialog-content {
+    padding: 1em;
   }
 
   .ui-dialog-titlebar-close {
     right: .5em;
   }
+
+  input[type="button"] {
+    @include button-variant($btn-link-color, $btn-link-bg, $btn-link-border);
+  }
 }
 
 .ui-widget-overlay {
@@ -180,9 +187,8 @@
 }
 
 
-/**
+//== Datepicker
- * Datepicker
+//
- */
 
 img.ui-datepicker-trigger {
   margin-left: 4px;
@@ -191,10 +197,12 @@ img.ui-datepicker-trigger {
 }
 
 .ui-datepicker {
-    padding: 3px;
+  @include nice-shadow(3);
-    box-shadow: $panel-shadow;
+  padding: .3em .6em .6em;
+  border: 0 none;
 
   .ui-datepicker-header {
+    margin: 0 -.3em;
     padding: .3em;
   }
 
@@ -229,6 +237,7 @@ img.ui-datepicker-trigger {
   }
 
   .ui-datepicker-calendar {
+    margin: 0;
     table-layout: fixed;
 
     .ui-state-default {
@@ -277,4 +286,15 @@ img.ui-datepicker-trigger {
       }
     }
   }
+
+  .ui-datepicker-buttonpane {
+    @include clearfix;
+    margin: .6em 0 0;
+    padding: .6em 0 0;
+
+    button {
+      margin: 0;
+      padding: $btn-padding-vertical $btn-padding-horizontal;
+    }
+  }
 }

src/sass/components/_jstoolbar.scss

@@ -7,14 +7,16 @@
 
   .box & {
     padding: 0;
-    }
 
     button {
-        margin-bottom: 5px;
+      margin-right: 2px;
-        box-shadow: none;
-        vertical-align: top;
     }
 
+    .jstSpacer {
+      margin-right: 4px;
+    }
+
+    @media (min-width: $screen-md) {
       .jstb_help {
         margin-right: 0;
         margin-left: -6px;
@@ -22,47 +24,152 @@
       }
     }
 
-@if $use-font-awesome
+    @media (min-width: $screen-lg) {
-{
+      button {
+        margin-right: 4px;
+      }
+
+      .jstSpacer {
+        margin-right: 6px;
+      }
+    }
+  }
+
+  button {
+    margin-bottom: 5px;
+    box-shadow: none;
+    vertical-align: top;
+  }
+}
+
+@if $use-font-awesome {
   .jstElements {
-        button[type="button"] {
+    %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;
       }
     }
 
-        .jstb_strong:before { content: $fa-var-bold; }
+    .jstb_strong {
-        .jstb_em:before     { content: $fa-var-italic; }
+      @extend %jstb-icon;
-        .jstb_ins:before    { content: $fa-var-underline; }
+
-        .jstb_del:before    { content: $fa-var-strikethrough; }
+      &::before { content: $fa-var-bold; }
-        .jstb_code:before   { content: $fa-var-code; }
+    }
-        .jstb_h1:before     { content: $fa-var-header; }
+
-        .jstb_h2:before     { content: $fa-var-header; font-size: 11px; }
+    .jstb_em {
-        .jstb_h3:before     { content: $fa-var-header; font-size: 9px; }
+      @extend %jstb-icon;
-        .jstb_ul:before     { content: $fa-var-list-ul; }
+
-        .jstb_ol:before     { content: $fa-var-list-ol; }
+      &::before { content: $fa-var-italic; }
-        .jstb_bq:before     { content: $fa-var-indent; }
+    }
-        .jstb_unbq:before   { content: $fa-var-outdent; }
+
-        .jstb_pre:before    { content: $fa-var-terminal; }
+    .jstb_ins {
-        .jstb_link:before   { content: $fa-var-link; }
+      @extend %jstb-icon;
-        .jstb_img:before    { content: $fa-var-image; }
+
+      &::before { content: $fa-var-underline; }
+    }
+
+    .jstb_del {
+      @extend %jstb-icon;
+
+      &::before { content: $fa-var-strikethrough; }
+    }
+
+    .jstb_code {
+      @extend %jstb-icon;
+
+      &::before { content: $fa-var-code; }
+    }
+
+    .jstb_h1 {
+      @extend %jstb-icon;
+
+      &::before { content: $fa-var-header; }
+    }
+
+    .jstb_h2 {
+      @extend %jstb-icon;
+
+      &::before { font-size: .7857em; content: $fa-var-header; }
+    }
+
+    .jstb_h3 {
+      @extend %jstb-icon;
+
+      &::before { font-size: .6429em; content: $fa-var-header; }
+    }
+
+    .jstb_ul {
+      @extend %jstb-icon;
+
+      &::before { content: $fa-var-list-ul; }
+    }
+
+    .jstb_ol {
+      @extend %jstb-icon;
+
+      &::before { content: $fa-var-list-ol; }
+    }
+
+    .jstb_bq {
+      @extend %jstb-icon;
+
+      &::before { content: $fa-var-indent; }
+    }
+
+    .jstb_unbq {
+      @extend %jstb-icon;
+
+      &::before { content: $fa-var-outdent; }
+    }
+
+    .jstb_pre {
+      @extend %jstb-icon;
+
+      &::before { content: $fa-var-terminal; }
+    }
+
+    .jstb_link {
+      @extend %jstb-icon;
+
+      &::before { content: $fa-var-link; }
+    }
+
+    .jstb_img {
+      @extend %jstb-icon;
+
+      &::before { content: $fa-var-image; }
+    }
+
+    .jstb_cut {
+      @extend %jstb-icon;
+
+      &::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; }
+    }
 
     button.jstb_help {
+      @extend %jstb-icon;
       color: $link-color;
 
       &:hover {
         color: $link-hover-color;
       }
 
-            &:before {
+      &::before { content: $fa-var-question-circle; }
-                content: $fa-var-question-circle;
-            }
     }
   }
 }

src/sass/components/_list.scss

@@ -11,9 +11,15 @@ table.list {
     margin-bottom: 0;
   }
 
-    th {
+  &.changesets {
+    margin-bottom: $line-height-computed;
+  }
+
+  th,
+  .table-list-header {
     padding: $table-cell-padding;
-        border-bottom: 2px solid $table-border-color;
+    border: 2px solid $table-border-color;
+    border-width: $table-list-header-border;
     color: $gray;
     vertical-align: bottom;
 
@@ -22,9 +28,20 @@ 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-bottom: 1px solid $table-border-color;
+    border: 1px solid $table-border-color;
+    border-width: $table-list-item-border;
     text-align: center;
     vertical-align: top;
 
@@ -38,36 +55,52 @@ table.list {
     }
 
     &.id,
-        &.tracker,
     &.parent,
-        &.relations {
+    &.relations,
+    &.tracker {
       width: 2%;
-            text-align: center;
     }
 
     &.id {
-            font-weight: bold;
+      font-weight: $font-weight-bold;
       text-align: right;
     }
 
-        &.name,
-        &.description,
-        &.subject,
-        &.comments,
-        &.roles,
-        &.author,
     &.assigned_to,
-        &.string {
+    &.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,
-        &.story_points {
+    &.story_points,
+    &.int,
+    &.float {
       text-align: right;
     }
 
+    &.reorder {
+      white-space: nowrap;
+    }
+  }
+
+  td,
+  div {
     &.buttons {
       text-align: right;
       white-space: nowrap;
@@ -75,11 +108,10 @@ table.list {
       a {
         padding-right: 5px;
       }
-        }
 
-        &.reorder {
+      img {
-            text-align: center;
+        vertical-align: middle;
-            white-space: nowrap;
+      }
     }
   }
 
@@ -89,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;
@@ -102,8 +140,10 @@ tr.project {
   }
 
   &.idnt .name span {
+    @extend %image-arrow-right;
     padding-left: 16px;
-        background: url("../images/bullet_arrow_right.png") no-repeat -5px 50%;
+    background-repeat: no-repeat;
+    background-position: -5px 50%;
   }
 
   @for $i from 1 through 9 {
@@ -117,20 +157,14 @@ tr.issue {
   text-align: center;
   white-space: nowrap;
 
-    &.string,
+  .string,
-    &.text,
+  .text,
   .subject,
   .category {
     white-space: normal;
   }
 
-    .autoscroll & {
+  .relations {
-        .subject > a {
-            display: block;
-        }
-    }
-
-    &.relations {
     text-align: left;
     white-space: normal;
 
@@ -139,29 +173,19 @@ tr.issue {
     }
   }
 
-    &.done_ratio table.progress {
-        margin-right: auto;
-        margin-left: auto;
-    }
-
   &.idnt .subject a {
-        padding-left: 16px;
+    @extend %image-arrow-right;
-        background-image: url("../images/bullet_arrow_right.png");
+    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 {
       .assigned_to,
       .subject {
         a {
-                    font-weight: bold;
+          font-weight: $font-weight-bold;
         }
       }
     }
@@ -195,21 +219,20 @@ tr.issue {
 
 tr {
   span.expander {
+    @extend %image-toggle-plus;
     margin-left: 0;
     padding-left: 8px;
-        background: url("../images/bullet_toggle_plus.png") no-repeat center center;
+    background-repeat: no-repeat;
+    background-position: center center;
     cursor: pointer;
-        @include user-select(none);
+    user-select: none;
   }
 
   &.open span.expander {
-        background-image: url("../images/bullet_toggle_minus.png");
+    @extend %image-toggle-minus;
   }
 }
 
-// /* do you */ .even {
-// }
-
 td.center {
   text-align: center;
 }
@@ -261,11 +284,11 @@ tr.entry {
 }
 
 
-/**
+//== Priorities
- * Priorities
+//
- */
+
-// scss-lint:disable SpaceAfterComma
 @if $color-priorities {
+  // scss-lint:disable SpaceAfterComma
   @include priority(".priority-lowest",  $priority-lowest-bg,  $priority-lowest-text,  $priority-lowest-link);
   @include priority(".priority-default", $priority-default-bg, $priority-default-text, $priority-default-link);
   @include priority(".priority-high3",   $priority-high3-bg,   $priority-high3-text,   $priority-high3-link);
@@ -274,28 +297,104 @@ tr.entry {
 }
 
 @if $color-trackers {
-    @include tracker(".tracker-1", $tracker-1-bg, $tracker-1-text);
+  tr.issue .id > a,
-    @include tracker(".tracker-2", $tracker-2-bg, $tracker-2-text);
+  a.issue,
-    @include tracker(".tracker-3", $tracker-3-bg, $tracker-3-text);
+  .relations > span > a.issue,
-    @include tracker(".tracker-4", $tracker-4-bg, $tracker-4-text);
+  .parent > a.issue {
-    @include tracker(".tracker-5", $tracker-5-bg, $tracker-5-text);
+    border-radius: $border-radius-small ($border-radius-small * 3) ($border-radius-small * 3) $border-radius-small;
-    @include tracker(".tracker-6", $tracker-6-bg, $tracker-6-text);
+    background-color: $tracker-default-bg;
-    @include tracker(".tracker-7", $tracker-7-bg, $tracker-7-text);
+    color: $tracker-default-text;
+
+    &:hover {
+      background-color: darken($tracker-default-bg, 10%);
+      color: $tracker-default-text;
+      text-decoration: none;
     }
 
+    &:focus,
+    &:active {
+      text-decoration: none;
+    }
+  }
+
+  a.issue {
+    margin-right: 1px;
+    padding: $tracker-inline-padding;
+    font-weight: normal;
+
+    &.closed {
+      position: relative;
+      color: mix($tracker-default-text, $tracker-default-bg, 75%);
+      text-decoration: none;
+
+      &::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: "";
+      }
+
+      &:hover::after {
+        border-top-color: rgba($tracker-default-text, .25);
+      }
+    }
+  }
+
+  tr.issue .id > a {
+    display: block;
+    padding: $tracker-list-padding;
+
+    &::before {
+      color: mix($tracker-default-text, $tracker-default-bg, 50%);
+      content: "#";
+    }
+  }
+
+  @if $colored-issue {
+    .issue.details a.issue,
+    .issue.details .wiki a.issue {
+      &,
+      &:hover {
+        color: $tracker-default-text;
+      }
+    }
+  }
+
+  @each $tracker-id, $tracker-colors in $tracker-colors-map {
+    @include tracker(
+      ".tracker-#{$tracker-id}",
+      map-get($tracker-colors, background),
+      map-get($tracker-colors, color)
+    );
+  }
+}
+
+@if $table-list-color-odd-rows {
   .odd {
     background-color: $table-bg-accent;
   }
+}
+
+@if $table-list-color-even-rows {
+  .even {
+    background-color: $table-bg-accent;
+  }
+}
 
 
-/**
+//== List groups
- * List groups
+//
- */
 
 tr.group {
   > td {
     border-bottom: 1px solid $table-border-color;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
     text-align: left;
 
     a {
@@ -331,9 +430,8 @@ tr.group {
 }
 
 
-/**
+//== Time entry in report
- * Time entry in report
+//
- */
 
 tr.time-entry {
   text-align: center;
@@ -355,10 +453,16 @@ tr.time-entry {
   }
 
   td.hours {
-        width: 5em;
+    font-weight: $font-weight-bold;
-        padding-right: .5em;
+  }
-        font-weight: bold;
+}
+
+.time-entries,
+tr.time-entry {
+  td.hours {
+    width: 1%;
     text-align: right;
+    white-space: nowrap;
 
     .hours-dec {
       font-size: .9em;
@@ -366,10 +470,22 @@ tr.time-entry {
   }
 }
 
+.mypage-box {
+  td.hours {
+    font-weight: $font-weight-bold;
 
-/**
+    em {
- * Wiki page history entry
+      font-style: normal;
- */
+    }
+  }
+
+  tr.time-entry td.hours {
+    font-weight: normal;
+  }
+}
+
+//== Wiki page history entry
+//
 
 tr.wiki-page-version {
   td.updated_on,
@@ -378,9 +494,8 @@ tr.wiki-page-version {
   }
 }
 
-/**
+//== Project versions list
- * Project versions list
+//
- */
 
 tr.version {
   &.closed {
@@ -402,9 +517,8 @@ tr.version {
 }
 
 
-/**
+//== Users list
- * Users list
+//
- */
 
 tr.user {
   td {
@@ -432,9 +546,8 @@ tr.user {
 }
 
 
-/**
+//== Plugins list
- * Plugins list
+//
- */
 
 table.plugins {
   .configure {
@@ -444,7 +557,7 @@ table.plugins {
   span.name {
     margin-bottom: .5em;
     font-size: $font-size-large;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   .description,
@@ -454,9 +567,8 @@ table.plugins {
 }
 
 
-/**
+//== Files list
- * Files list
+//
- */
 
 table.files {
   tbody th {
@@ -475,9 +587,9 @@ table.files {
   }
 }
 
-/**
+
- * Admin lists
+//== Admin lists
- */
+//
 
 .controller-enumerations {
   td.name {
@@ -487,5 +599,24 @@ table.files {
   td.tick,
   td.reorder {
     width: 15%;
+    text-align: center;
+  }
+}
+
+
+//== Totals
+//
+
+.query-totals {
+  > span {
+    margin-right: $padding-base-horizontal;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .value {
+    font-weight: $font-weight-bold;
   }
 }

src/sass/components/_pagination.scss

@@ -2,17 +2,48 @@
 // Pagination (multiple pages)
 // --------------------------------------------------
 .pagination {
-    .previous,
+  .pages {
-    .next,
-    .page {
     display: inline-block;
-        padding: $padding-small-vertical $padding-small-horizontal;
+    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;
     border-radius: $border-radius-base;
     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,16 +52,32 @@
     }
   }
 
-    .page.current {
+  .page.current,
+  .current > span {
     border-color: $pagination-active-border;
     background-color: $pagination-active-bg;
-        cursor: default;
     color: $pagination-active-color;
+    cursor: default;
     z-index: 2;
   }
 
   .items,
   .per-page {
-        margin-left: $padding-small-vertical;
+    display: inline-block;
+    margin: ($pagination-padding-vertical + 1px) 0 ($pagination-padding-vertical + 1px) $pagination-padding-vertical;
+  }
+}
+
+p.pagination {
+  margin-bottom: 0;
+  float: left;
+
+  + h1,
+  + h2,
+  + h3,
+  + h4,
+  + h5,
+  + h6 {
+    clear: both;
   }
 }

src/sass/components/_plugins.scss

@@ -1,5 +1,7 @@
 //
 // Redmine Backlogs
+// https://github.com/HolonGlobe/redmine_backlogs
+// Forked from: https://github.com/backlogs/redmine_backlogs
 // --------------------------------------------------
 
 #backlogs_view_issues_sidebar {
@@ -27,20 +29,32 @@
       display: none;
     }
   }
+
+  .burndown_chart {
+    max-width: $sidebar-width-computed;
+  }
 }
 
 
 //
 // Redmine Time Tracker
+// https://github.com/fernandokosh/redmine_time_tracker
 // --------------------------------------------------
 
 @if $use-font-awesome {
-    .icon.icon-start,
+  .tt_list_button {
-    .icon.icon-stop {
+    @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,
@@ -48,12 +62,12 @@
         color: $icon-success-color;
       }
 
-        &:before {
+      &::before {
         content: $fa-var-clock-o;
       }
     }
 
-    .icon.icon-stop {
+    &.icon-stop {
       color: $icon-danger-color;
 
       &:hover,
@@ -61,12 +75,253 @@
         color: $icon-danger-color;
       }
 
-        &:before {
+      &::before {
         content: $fa-var-history;
       }
     }
+  }
 
   .time-tracker-quick-menu:empty {
     display: none;
   }
+
+  #user-time-bookings-list {
+    clear: both;
+  }
+}
+
+
+//
+// Redmine CRM People
+// http://www.redminecrm.com/projects/people/
+// --------------------------------------------------
+
+#people_list {
+  table.index {
+    margin-bottom: $line-height-computed;
+  }
+}
+
+#content {
+  .person.details {
+    margin-bottom: $line-height-computed;
+    padding: $issue-padding;
+    border: 1px solid $issue-border;
+    border-radius: $border-radius-base;
+    background-color: $issue-bg;
+
+    .avatar {
+      width: 64px;
+      max-width: 64px;
+      overflow: hidden;
+    }
+
+    .name,
+    .subject_info {
+      padding: 0 0 0 $issue-padding;
+    }
+
+    .name {
+      > h1 {
+        margin-bottom: 5px;
+      }
+
+      > p {
+        margin-bottom: 0;
+      }
+    }
+
+    .subject_info {
+      border-left: 1px solid $issue-border;
+
+      > ul {
+        margin: 0;
+      }
+    }
+
+    @if $use-font-awesome {
+      .icon {
+        background-image: none;
+      }
+    }
+  }
+
+  .department.issue.details {
+    > p {
+      clear: both;
+    }
+
+    > .author {
+      margin-bottom: 0;
+      clear: none;
+    }
+  }
+}
+
+#sidebar {
+  .person.attributes {
+    font-size: $font-size-list;
+
+    th,
+    td {
+      padding: $table-condensed-cell-padding;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .icon {
+      padding-left: $table-condensed-cell-padding + 20px;
+      background-position: $table-condensed-cell-padding $table-condensed-cell-padding;
+    }
+
+    @if $use-font-awesome {
+      .icon {
+        background-image: none;
+
+        > a {
+          @extend %fa-icon;
+        }
+      }
+    }
+
+    .email {
+      td a {
+        display: block;
+        max-width: floor($sidebar-width / 3);
+        text-overflow: ellipsis;
+        overflow: hidden;
+
+        &:hover {
+          position: absolute;
+          max-width: 100%;
+          margin: -$table-condensed-cell-padding;
+          padding: $table-condensed-cell-padding;
+          background: $body-bg;
+          box-shadow: $panel-shadow;
+        }
+      }
+    }
+  }
+
+  .person_data {
+    td.avatar,
+    td.name {
+      padding: 0 0 $table-cell-padding;
+    }
+
+    td.avatar {
+      width: 40px;
+    }
+
+    td.name {
+      h4 {
+        margin: 0;
+        letter-spacing: 0;
+      }
+    }
+  }
+}
+
+
+//
+// Redmine codebutton
+// https://github.com/mediatainment/redmine_codebutton
+// --------------------------------------------------
+
+#toolbar-code-options {
+  select {
+    width: 100%;
+  }
+
+  .buttons {
+    white-space: nowrap;
+  }
+}
+
+
+//
+// Redmine Stuff To Do
+// https://github.com/raafael911/stuff_to_do_plugin
+// --------------------------------------------------
+
+#stuff-to-do {
+  p {
+    @if $sidebar-position == "left" {
+      margin-right: -($sidebar-padding-horizontal);
+    } @else {
+      margin-left: -($sidebar-padding-horizontal);
+    }
+
+    > a {
+      display: block;
+      padding: $sidebar-padding-vertical $sidebar-padding-horizontal;
+
+      @if $sidebar-position == "left" {
+        border-radius: $border-radius-large 0 0 $border-radius-large;
+      } @else {
+        border-radius: 0 $border-radius-large $border-radius-large 0;
+      }
+
+      &:hover {
+        background-color: $sidebar-link-hover-bg;
+        text-decoration: none;
+      }
+    }
+
+    > br {
+      display: none;
+    }
+  }
+}
+
+// Note: the following applies to the latest version
+// of Stuff To Do plugin from the master branch.
+
+.controller-stuff_to_do {
+  .menu {
+    label,
+    select {
+      margin-bottom: 5px;
+    }
+  }
+
+  .stuff-to-do-item {
+    padding: $table-cell-padding;
+    border: 1px solid $table-border-color;
+    border-width: $table-list-item-border;
+    background-color: $body-bg;
+  }
+
+  .pane {
+    ol {
+      padding: 0;
+    }
+
+    .issue-details {
+      width: 80%;
+      margin: 0;
+
+      @if $use-font-awesome {
+        a {
+          img {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .progress {
+      width: 20%;
+      margin: 0;
+    }
+
+    .estimate {
+      top: $table-cell-padding - 1px;
+      right: $table-cell-padding;
+      left: auto;
+      width: 20%;
+      font-size: $font-size-small;
+      text-align: right;
+    }
+  }
 }

src/sass/components/_print.scss

@@ -25,7 +25,7 @@
     padding: 0;
     border: 0;
     background: #fff;
-        overflow: visible !important;
+    overflow: visible !important; // scss-lint:disable ImportantRule
   }
 
   .autoscroll {

src/sass/components/_progress.scss

@@ -3,16 +3,21 @@
 // --------------------------------------------------
 
 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 & {
-        float: none;
     margin-right: auto;
     margin-left: auto;
+    float: none;
   }
 
   td {
@@ -32,6 +37,10 @@ table.progress {
       background-color: $progress-bg;
     }
   }
+
+  .issue & td {
+    padding: 0;
+  }
 }
 
 p {

src/sass/components/_simple-list.scss

@@ -2,27 +2,25 @@
 // Activity and search results list
 // --------------------------------------------------
 
-
+#activity dl,
-#search-results,
+#search-results {
-div#activity dl {
   margin-left: $padding-side;
 }
 
-div#activity,
+#activity,
 #search-results {
   dd {
     margin-bottom: $line-height-computed;
-        padding-left: $padding-side;
+    padding-top: .1em;
   }
 
   dt {
-        margin-bottom: 2px;
     padding-left: $padding-side;
     background-repeat: no-repeat;
     background-position: 0 center;
   }
 
-    span.project:after {
+  span.project::after {
     content: " -";
   }
 
@@ -33,8 +31,29 @@ div#activity,
   }
 }
 
-div#activity {
+#activity {
+  $activity-avatar: 24px;
+  $activity-avatar-space: 5px;
+  $activity-indent: 20px;
+
+  @if $use-gravatars {
+    $activity-indent: $activity-indent + $activity-avatar + $activity-avatar-space;
+  }
+
+  h3,
+  h4 {
+    margin: 0 0 $line-height-computed;
+    padding-bottom: .2em;
+    border-bottom: 1px dotted $gray-light;
+    font-size: $font-size-h4;
+    font-weight: normal;
+  }
+
   dt {
+    &.grouped {
+      margin-left: $activity-indent;
+    }
+
     &.me .time {
       border-bottom: 1px solid $gray-lighter;
     }
@@ -42,19 +61,27 @@ div#activity {
     .time {
       color: $gray;
     }
+
+    @if $use-gravatars {
+      .gravatar {
+        margin-top: -2px;
+        margin-right: $activity-avatar-space;
+        float: left;
+      }
+    }
   }
 
   dd {
     font-size: $font-size-small;
-    }
+    overflow: hidden;
 
-    dt.grouped,
+    &.grouped {
-    dd.grouped {
+      margin-left: $activity-indent;
-        margin-left: $padding-side;
+    }
   }
 }
 
-div#search-results-counts {
+#search-results-counts {
   float: right;
 
   ul {
@@ -78,9 +105,9 @@ div#search-results-counts {
   }
 
   label {
+    @include checkbox;
     display: inline-block;
     margin-right: 5px;
-        @include checkbox;
   }
 
   p:last-child {

src/sass/components/_tabs.scss

@@ -7,20 +7,35 @@
 
   position: relative;
   margin-bottom: $line-height-computed;
-    padding-right: $tabs-buttons-width;
   overflow: hidden;
 
+  @if not $flexbox-layout {
+    padding-right: $tabs-buttons-width;
+  }
+
   > ul {
-        width: 2000px; // stop it from breaking
     margin: 0;
     padding-left: 0;
     border-bottom: 1px solid $tab-border;
     list-style: none;
+
+    @if $flexbox-layout {
+      display: flex;
+      flex-wrap: nowrap;
+      height: $line-height-computed + $tab-padding-vertical * 2 + 1px;
+    } @else {
+      width: 2000px;
       @extend %clearfix;
+    }
 
     > li {
       margin-bottom: -1px;
+
+      @if $flexbox-layout {
+        flex: 0 1 auto;
+      } @else {
         float: left;
+      }
 
       > a {
         display: block;
@@ -30,6 +45,7 @@
         border: 1px solid transparent;
         border-radius: $border-radius-base $border-radius-base 0 0;
         text-align: center;
+        white-space: nowrap;
 
         &:hover,
         &:focus {
@@ -53,21 +69,23 @@
     right: 0;
     width: $tabs-buttons-width;
     padding-left: 5px;
+    border-bottom: 1px solid $tab-border;
     background-color: $body-bg;
 
     > button {
       width: 50%;
-            height: $tab-padding-vertical * 2 + $line-height-computed;
+      height: $tab-padding-vertical * 2 + $line-height-computed + 1px;
       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 {
@@ -80,18 +98,17 @@
     }
 
     .tab-left {
-            background-image: url("../images/bullet_arrow_left.png");
+      @extend %image-arrow-left;
     }
 
     .tab-right {
-            background-image: url("../images/bullet_arrow_right.png");
+      @extend %image-arrow-right;
     }
   }
 }
 
-/**
+//== Specific tabs content layout
- * Specific tabs content layout
+//
- */
 
 #tab-content-modules fieldset p {
   margin: 3px 0 4px;
@@ -112,13 +129,13 @@
     margin-bottom: $line-height-computed;
 
     legend {
-            font-weight: bold;
+      font-weight: $font-weight-bold;
     }
 
     label {
+      @include checkbox;
       display: block;
       margin-bottom: 3px;
-            @include checkbox;
     }
 
     label[for=principal_search] {
@@ -142,3 +159,9 @@
 #tab-content-memberships .splitcontentright select {
   width: 100%;
 }
+
+#principals_for_new_member {
+  .pagination {
+    float: none;
+  }
+}

src/sass/components/_top.scss

@@ -3,11 +3,95 @@
 // --------------------------------------------------
 
 #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;
+    $toggler-position-h:    1px;
+
+    max-height: floor($font-size-base * $font-size-small-unitless * $line-height-base) + $padding-small-vertical;
+    padding-bottom: 0;
+    overflow: hidden;
+
+    &.expanded {
+      max-height: none;
+    }
+
+    a {
+      display: inline-block;
+      margin-bottom: $padding-small-vertical;
+      white-space: nowrap;
+    }
+
+    .top-menu-toggler {
+      display: block;
+      position: absolute;
+      top: $toggler-position-v;
+      @if $sidebar-position == "left" {
+        left: $toggler-position-h;
+      } @else {
+        right: $toggler-position-h;
+      }
+      user-select: none;
+
+      @if $use-font-awesome {
+        font-size: 14px;
+
+        &::before {
+          content: $fa-var-caret-square-o-down;
+        }
+      } @else {
+        @extend %image-arrow-down-white;
+      }
+
+      @if $use-font-awesome {
+        @extend %fa-icon;
+        color: mix($top-menu-link, $top-menu-bg, 33%);
+        line-height: 1;
+
+        &::before {
+          margin-right: 0;
+        }
+
+        &:hover,
+        &:focus,
+        &:active {
+          color: mix($top-menu-link-hover, $top-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: lighten($top-menu-bg, 15%);
+        }
+      }
+
+      &.expanded {
+        @if $use-font-awesome {
+          &::before {
+            content: $fa-var-caret-square-o-up;
+          }
+        } @else {
+          @extend %image-arrow-up-white;
+        }
+      }
+
+      @media screen and (min-width: $top-menu-collapse-breakpoint) {
+        display: none;
+      }
+    }
+  }
 
   ul {
     margin: 0;
@@ -23,7 +107,7 @@
 
   a {
     color: $top-menu-link;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
 
     &:hover {
       color: $top-menu-link-hover;
@@ -32,6 +116,7 @@
   }
 
   #loggedas {
+    margin-left: 1em;
     float: right;
   }
 }
@@ -51,21 +136,42 @@
 // --------------------------------------------------
 
 #header {
+  @extend %clearfix;
   position: relative;
   background-color: $header-bg;
   color: $header-text;
 
   > h1 {
-        padding: 10px $padding-side;
+    padding: $header-padding-vertical $header-padding-horizontal;
 
-        > .root {
+    @if $use-logo {
+      padding-left: $logo-image-width + $logo-position-horizontal + $logo-space;
+      background-image: url("../images/logo/logo.png");
+      background-repeat: no-repeat;
+      background-position: $logo-position-horizontal $logo-position-vertical;
+
+      @if $use-retina-logo {
+        @include img-retina("../images/logo/logo@2x.png", $logo-image-width, $logo-image-height);
+      }
+    }
+
+    .root {
       color: $header-root;
       font-weight: 500;
     }
 
-        > .ancestor {
+    .ancestor {
       font-weight: 500;
     }
+
+    .root,
+    .ancestor {
+      display: inline-block;
+    }
+
+    .current-project {
+      display: inline-block;
+    }
   }
 
   a {
@@ -74,8 +180,8 @@
 }
 
 #quick-search {
-    margin-top: ($header-title-line-height + $padding-large-vertical * 2 - $input-height-base - 1px) / 2;
+  margin-top: floor(($header-title-line-height + $header-padding-vertical * 2 - $input-height-base) / 2) - 1px;
-    margin-right: $padding-side;
+  margin-right: $header-padding-horizontal;
   float: right;
   color: $header-text;
 
@@ -90,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%);
@@ -118,34 +226,58 @@
 }
 
 #main-menu {
-    border-bottom: 1px solid $main-menu-border;
+  clear: both;
   background-color: $main-menu-bg;
+  color: $text-color;
+  box-shadow: inset 0 -1px $main-menu-border;
 
-    @media screen and (max-width: $screen-sm-max) {
+  &.tabs {
-        font-size: $font-size-small-px;
+    margin-bottom: 0;
+    overflow: inherit;
+
+    > ul {
+      height: auto;
+
+      > li {
+        > a {
+          border: 0 none;
+          border-radius: 0;
+          background: transparent;
+        }
+      }
+    }
   }
 
-    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;
-            margin-bottom: -1px;
       float: left;
 
+      &:hover {
+        > .new-object {
+          border-bottom: 1px solid $main-menu-dropdown-bg;
+          z-index: 100;
+        }
+
+        > .menu-children {
+          display: block;
+        }
+      }
+
       > a {
         display: block;
-                padding: $main-menu-padding-vertical 0;
+        padding: $main-menu-padding-vertical $main-menu-padding-horizontal;
-                @include transition(box-shadow .2s);
+        transition: box-shadow .15s;
-
+        color: $main-menu-link;
-                @media screen and (min-width: $screen-md-min) {
+        line-height: $line-height-computed;
-                    padding-right: $main-menu-padding-horizontal;
+        white-space: nowrap;
-                    padding-left: $main-menu-padding-horizontal;
-                }
 
         @media screen and (min-width: $screen-lg-min) {
           padding-right: $main-menu-padding-horizontal * 2;
@@ -163,9 +295,27 @@
           padding-bottom: $main-menu-padding-vertical - $main-menu-shadow-width;
           border-bottom: 3px solid $main-menu-shadow-active;
           color: $main-menu-link-active;
-                    font-weight: bold;
+          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;
+          }
+        }
       }
     }
   }
@@ -173,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
+  }
 }

src/sass/components/_wiki.scss

@@ -1,6 +1,33 @@
 .wiki.wiki-page {
   margin-bottom: $line-height-computed;
   font-size: $wiki-font-size;
+
+  @if $wiki-page-more-vertical-space {
+    // Anchors will make headers more separated,
+    // and it will look better when you open page with hash in URL
+    a[name]:empty {
+      display: block;
+      overflow: hidden;
+    }
+
+    // Add some space between list items
+    ul,
+    ol {
+      li {
+        margin-top: .25em;
+      }
+
+      ul,
+      ol {
+        margin-top: .25em;
+        margin-bottom: .25em;
+
+        li {
+          margin-top: .125em;
+        }
+      }
+    }
+  }
 }
 
 .controller-wiki .wiki > .preview {
@@ -11,33 +38,53 @@ div.wiki {
   color: $wiki-text;
   line-height: $wiki-line-height;
 
-    h1,
+  //scss-lint:disable SingleLinePerSelector
-    h2,
+  h1, .h1,
-    h3,
+  h2, .h2,
-    h4,
+  h3, .h3,
-    h5,
+  h4, .h4,
-    h6 {
+  h5, .h5,
+  h6, .h6 {
     margin-top: 1em;
     margin-bottom: $wiki-font-size;
     font-weight: $headings-font-weight;
     line-height: $headings-line-height;
   }
 
-    h1 { font-size: $font-size-h1; line-height: 1.2; }
+  h1, .h1 {
-    h2 { font-size: $font-size-h2; line-height: 1.225; }
-    h3 { font-size: $font-size-h3; line-height: 1.43; }
-    h4 { font-size: $font-size-h4; }
-    h5 { font-size: $font-size-h5; }
-    h6 { font-size: $font-size-h6; }
-
-    h1,
-    h2 {
     padding-bottom: .3em;
     border-bottom: 1px solid $gray-lighter;
+    font-size: $font-size-h1;
+    line-height: 1.2;
   }
 
-    h6 {
+  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 {
+    font-weight: normal;
   }
 
   > a:first-child {
@@ -51,10 +98,37 @@ div.wiki {
     }
   }
 
-    > *:last-child {
+  > a:target {
+    + h2,
+    + h3,
+    + h4,
+    + h5,
+    + h6 {
+      &::before {
+        display: inline-block;
+        width: .7em;
+        margin-left: -.7em;
+        color: $headings-anchor-color-active;
+        font-weight: normal;
+        content: "#";
+      }
+    }
+  }
+
+  >:last-child {
     margin-bottom: 0;
   }
 
+  blockquote {
+    >:first-child {
+      margin-top: 0;
+    }
+
+    >:last-child {
+      margin-bottom: 0;
+    }
+  }
+
   .contextual {
     a {
       opacity: .4;
@@ -65,6 +139,11 @@ div.wiki {
     }
   }
 
+  a {
+    word-break: break-all;
+    word-break: break-word;
+  }
+
   p,
   ul,
   ol {
@@ -86,7 +165,6 @@ div.wiki {
   }
 
   table {
-        // scss-lint:disable DuplicateProperty
     display: block;
     width: 100%;
     margin-bottom: $line-height-computed;
@@ -119,22 +197,19 @@ div.wiki {
   }
 
   code {
-        // scss-lint:disable DuplicateProperty
     padding: .2em .33em;
     border-radius: $border-radius-base;
-        background-color: #f5f5f5; // IE8 fallback
     background-color: rgba(#000, .04);
     font-size: $font-size-small;
   }
 
   pre {
-        // scss-lint:disable DuplicateProperty
     width: auto;
+    margin-bottom: 1.15em;
     padding: 4px 8px;
     border: 1px solid #e7e7e7;
     border-radius: $border-radius-base;
     border-color: rgba(#000, .068);
-        background-color: #f7f7f7; // IE8 fallback
     background-color: rgba(#000, .03);
     overflow-x: auto;
     overflow-y: hidden;
@@ -148,6 +223,11 @@ div.wiki {
     }
   }
 
+  img {
+    max-width: 100%;
+    vertical-align: middle;
+  }
+
   .toc {
     margin-bottom: $line-height-computed;
     margin-left: 0;
@@ -215,10 +295,19 @@ div.wiki {
         }
       }
     }
+  }
 
-        img {
+  .toc-active-prev + .toc {
-            max-width: 100%;
+    padding-left: $padding-large-horizontal;
-            vertical-align: middle;
+    border-left: 4px solid $toc-active-border;
+
+    a {
+      color: $toc-active-link;
+
+      &:focus,
+      &:hover {
+        color: $toc-active-link-hover;
+      }
     }
   }
 }
@@ -234,9 +323,9 @@ h6 {
     position: relative;
     top: -(1em - $font-size-small);
     margin-left: 5px;
-        color: $gray-lighter !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 {
@@ -244,12 +333,18 @@ h6 {
       display: inline;
     }
   }
+
+  img {
+    display: inline-block;
+    max-width: 100%;
+    vertical-align: middle;
+  }
 }
 
 p.footnote {
   margin-bottom: 5px;
 
-    &:before {
+  &::before {
     display: block;
     width: 300px;
     margin-top:  $line-height-computed;
@@ -258,7 +353,7 @@ p.footnote {
     content: "";
   }
 
-    + p.footnote:before {
+  + p.footnote::before {
     display: none;
   }
 }
@@ -280,17 +375,115 @@ p.footnote {
   border-top: 1px solid $gray-lighter;
 
   > p {
+    margin-bottom: 0;
     float: left;
   }
 
   #add_attachment_form {
+    padding-top: $line-height-computed;
     clear: left;
   }
 }
 
-.controller-wiki.action-show {
+
-    .other-formats {
+//
-        margin-top: 0;
+// Custom classes for Bootstrap-like features
+// --------------------------------------------------
+
+
+// Pager
+// see: http://getbootstrap.com/components/#pagination-pager
+
+.wiki-pager {
+  > a {
+    display: inline-block;
+    padding: $padding-base-vertical $padding-base-horizontal;
+    border: 1px solid $btn-default-border;
+    border-radius: ceil($font-size-base + ($padding-base-vertical + 1px) * 2) / 2;
+    background-color: $body-bg;
+    line-height: 1;
+    white-space: nowrap;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: $btn-default-bg;
+      text-decoration: none;
+    }
+  }
+
+  &.wiki-pager--aligned {
+    overflow: hidden;
+
+    > a:first-child {
+      float: left;
+    }
+
+    > a:last-child {
       float: right;
     }
   }
+}
+
+
+//== 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));
+  font-weight: 300;
+  line-height: 1.4;
+
+  @media (min-width: $screen-sm-min) {
+    font-size: ($font-size-base * 1.5);
+  }
+}
+
+
+// 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
+
+.text-muted      { color: $gray-light; }
+.text-primary    { color: $brand-primary; }
+.text-success    { color: $brand-success; }
+.text-info       { color: $brand-info; }
+.text-warning    { color: $brand-warning; }
+.text-danger     { color: $brand-danger; }
+
+.bg-primary      { background-color: $brand-primary; color: $brand-text; }
+.bg-success      { background-color: $state-success; }
+.bg-info         { background-color: $state-info; }
+.bg-warning      { background-color: $state-warning; }
+.bg-danger       { background-color: $state-danger; }
+
+p {
+  &.bg-primary,
+  &.bg-success,
+  &.bg-info,
+  &.bg-warning,
+  &.bg-danger {
+    padding: $panel-body-padding;
+  }
+}

src/sass/javascripts/_sidebar-toggler.scss

@@ -1,13 +1,6 @@
 @if $enable-sidebar-toggler {
     $toggler-position-v:        1px;
     $toggler-position-h:        1px;
-    $arrow-right:               "../images/bullet_arrow_right.png";
-    $arrow-left:                "../images/bullet_arrow_left.png";
-
-    @if $use-font-awesome {
-        $arrow-right:           $fa-var-caret-square-o-right;
-        $arrow-left:            $fa-var-caret-square-o-left;
-    }
 
     #main {
         position: relative;
@@ -15,10 +8,12 @@
 
     #sidebar {
         @if $fixed-layout {
+            will-change: margin, opacity;
+            transition: margin .5s, opacity .5s;
             opacity: 1;
-            @include transition(margin .5s, opacity .5s);
         } @else {
-            @include transition(margin .5s);
+            will-change: margin;
+            transition: margin .5s;
         }
 
         &.sidebar-hiding {
@@ -38,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;
             }
 
@@ -76,40 +70,40 @@
             left: $toggler-position-h;
 
             @if $use-font-awesome {
-                &:before {
+                &::before {
-                    content: $arrow-left;
+                    content: $fa-var-caret-square-o-left;
                 }
             } @else {
-                background-image: url($arrow-left);
+                @extend %image-arrow-left;
             }
         } @else {
             right: $toggler-position-h;
 
             @if $use-font-awesome {
-                &:before {
+                &::before {
-                    content: $arrow-right;
+                    content: $fa-var-caret-square-o-right;
                 }
             } @else {
-                background-image: url($arrow-right);
+                @extend %image-arrow-right;
             }
         }
 
         &.sidebar-hidden {
             @if $sidebar-position == "left" {
                 @if $use-font-awesome {
-                    &:before {
+                    &::before {
-                        content: $arrow-right;
+                        content: $fa-var-caret-square-o-right;
                     }
                 } @else {
-                    background-image: url($arrow-right);
+                    @extend %image-arrow-right;
                 }
             } @else {
                 @if $use-font-awesome {
-                    &:before {
+                    &::before {
-                        content: $arrow-left;
+                        content: $fa-var-caret-square-o-left;
                     }
                 } @else {
-                    background-image: url($arrow-left);
+                    @extend %image-arrow-left;
                 }
             }
         }

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)
  */

src/sass/lib/_normalize.scss

@@ -116,7 +116,7 @@ abbr[title] {
 
 b,
 strong {
-  font-weight: bold;
+  font-weight: $font-weight-bold;
 }
 
 //
@@ -406,7 +406,7 @@ textarea {
 //
 
 optgroup {
-  font-weight: bold;
+  font-weight: $font-weight-bold;
 }
 
 // Tables

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

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

src/sass/mixins/_buttons.scss

@@ -7,33 +7,52 @@
 }
 
 @mixin button-variant($color, $bg, $border) {
-    $focus-bg:      darken($bg, 8%);
+  $correction: 1;
-    $focus-border:  darken($border, 8%);
+  @if hue($bg) > 120 and hue($bg) < 160 or lightness($bg) > 90 {
-    $active-shadow: inset 0 1px 3px rgba(#000, .3);
+    $correction: .5;
+  }
+  $normal-shadow: darken($border, 12% * $correction);
+  $focus-bg:      darken($bg, 12% * $correction);
+  $focus-border:  darken($border, 12% * $correction);
+  $focus-shadow:  darken($focus-border, 12% * $correction);
+  $active-bg:     darken($bg, 12% * $correction);
+  $active-border: darken($border, 15% * $correction);
+  $active-shadow: inset 0 3px 4px -2px $active-border;
 
-    color: $color;
+  @if lightness($bg) > 98 {
-    border-color: $border;
-    background-color: $bg;
-    box-shadow: 0 1px 0 $border;
-
-    @if lightness($bg) > 90 {
     $focus-bg:      darken($bg, 5%);
     $focus-border:  darken($border, 5%);
-        $active-shadow: inset 0 1px 2px rgba(#000, .1);
+    $normal-shadow: none;
+    $focus-shadow:  none;
+  }
+
+  background-color: $bg;
+  color: $color;
+  @if $normal-shadow == "none" {
+    border-color: $border;
+    box-shadow: none;
+  } @else {
+    border-color: $border $border $normal-shadow;
+    box-shadow: 0 1px 0 $normal-shadow;
   }
 
   &:hover,
   &:focus {
-        border-color: $focus-border;
     background-color: $focus-bg;
     color: $color;
-        box-shadow: 0 1px 0 $focus-border;
+    @if $focus-shadow == "none" {
+      border-color: $focus-border;
+      box-shadow: none;
+    } @else {
+      border-color: $focus-border $focus-border $focus-shadow;
+      box-shadow: 0 1px 0 $focus-shadow;
+    }
   }
 
   &:active {
-        border-color: $border;
+    transform: translate(0, 1px);
-        background-color: $bg;
+    border-color: $active-border;
-        @include translate(0, 1px);
+    background-color: $active-bg;
     box-shadow: $active-shadow;
   }
 }

src/sass/mixins/_clearfix.scss

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

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;

src/sass/mixins/_gradients.scss

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

src/sass/mixins/_image.scss

@@ -0,0 +1,15 @@
+// Retina image
+//
+
+@mixin img-retina($file-2x, $width-1x, $height-1x) {
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (min--moz-device-pixel-ratio: 2),
+  only screen and (-o-min-device-pixel-ratio: 2/1),
+  only screen and (min-device-pixel-ratio: 2),
+  only screen and (min-resolution: 192dpi),
+  only screen and (min-resolution: 2dppx) {
+    background-image: url("#{$file-2x}");
+    background-size: $width-1x $height-1x;
+  }
+}

src/sass/mixins/_issues.scss

@@ -16,8 +16,16 @@
       color: darken($color, 10%);
     }
 
+    @if $table-list-color-odd-rows {
       &.odd {
-            background: darken($background, 3%);
+        background: darken($background, $table-accent-factor * 100%);
+      }
+    }
+
+    @if $table-list-color-even-rows {
+      &.even {
+        background: darken($background, $table-accent-factor * 100%);
+      }
     }
 
     td {
@@ -33,6 +41,24 @@
     }
   }
 
+  @if $table-list-highlight-rows {
+    table.list > tbody > tr#{$parent}:hover {
+      background: darken($background, $table-hover-factor * 100%);
+    }
+
+    @if $table-list-color-odd-rows {
+      &.odd {
+        background: darken($background, ($table-accent-factor + $table-hover-factor) * 100%);
+      }
+    }
+
+    @if $table-list-color-even-rows {
+      &.even {
+        background: darken($background, ($table-accent-factor + $table-hover-factor) * 100%);
+      }
+    }
+  }
+
   @if $colored-issue {
     .issue.details#{$parent} {
       color: $color;
@@ -111,7 +137,6 @@
   a#{$parent},
   .relations > span > a#{$parent},
   .parent > a#{$parent} {
-        border-radius: $border-radius-small ($border-radius-small * 3) ($border-radius-small * 3) $border-radius-small;
     background-color: $background;
     color: $color;
 
@@ -122,44 +147,26 @@
         background-color: darken($background, 10%);
       }
       color: $color;
-            text-decoration: none;
-        }
-
-        &:focus,
-        &:active {
-            text-decoration: none;
     }
   }
 
   a#{$parent} {
-        margin-right: 1px;
-        padding: $tracker-inline-padding;
-        font-weight: normal;
-
     &.closed {
-            position: relative;
       color: mix($color, $background, 75%);
-            text-decoration: none;
 
-            &:after {
+      &::after {
-                display: block;
+        border-top-color: rgba($color, .95);
-                position: absolute;
+      }
-                top: 50%;
+
-                right: 5px;
+      &:hover::after {
-                left: 5px;
+        border-top-color: rgba($color, .25);
-                border-top: 1px solid rgba($color, .35);
-                content: "";
       }
     }
   }
 
   tr#{$parent} .id > a {
-        display: block;
+    &::before {
-        padding: $tracker-list-padding;
-
-        &:before {
       color: mix($color, $background, 50%);
-            content: "#";
     }
   }
 

src/sass/mixins/_link-variant.scss

@@ -0,0 +1,10 @@
+// Link variant
+
+@mixin link-variant($default-color, $hover-color: darken($default-color, 10%)) {
+  color: $default-color;
+
+  &:focus,
+  &:hover {
+    color: $hover-color;
+  }
+}

src/sass/mixins/_opacity.scss

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

src/sass/mixins/_shadows.scss

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

src/sass/mixins/_vendor-prefixes.scss

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

src/sass/plugins/redmine_backlogs/global.scss

@@ -1,7 +1,7 @@
 @import "common";
 
 html {
-    overflow-y: scroll !important;
+  overflow-y: scroll;
   height: 100%;
 }
 
@@ -14,6 +14,7 @@ body {
   color: $text-color;
   font-family: $font-family-base;
   font-size: $font-size-base;
+  font-weight: $font-weight-normal;
   line-height: $line-height-base;
 }
 
@@ -26,25 +27,24 @@ a {
     color: $link-hover-color;
     text-decoration: $link-hover-decoration;
   }
+}
 
-    &.issue.closed {
+.issue.closed {
   color: $link-color-issue-closed;
   text-decoration: $link-closed-decoration;
 }
 
-    &.project.closed {
+.project.closed {
   color: $link-color-project-closed;
 }
 
-    &.user.locked {
+.user.locked {
   color: $link-color-user-locked;
 }
-}
 
 
-/**
+//== Form elements
- * Form elements
+//
- */
 
 button,
 input,
@@ -53,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,
@@ -63,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 {
@@ -88,15 +88,15 @@ 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;
-    cursor: default;
   color: $input-color;
   white-space: nowrap;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
+  cursor: default;
   overflow: hidden;
-    @include transition(border-color ease-in-out .1s, box-shadow ease-in-out .1s);
+  box-sizing: border-box;
-    @include box-sizing(border-box);
 
   &:hover,
   &:focus {
@@ -104,7 +104,7 @@ button.ui-multiselect {
   }
 
   &:active {
-        @include translate(0, 0);
+    transform: translate(0, 0);
   }
 
   &.ui-state-active {
@@ -118,11 +118,11 @@ button.ui-multiselect {
 }
 
 
-/**
+//== Top toolbar
- * Top toolbar
+//
- */
 
 #toolbar {
+  @include clearfix;
   display: block;
   position: relative;
   padding: 10px $padding-side;
@@ -130,7 +130,6 @@ button.ui-multiselect {
   box-shadow: $panel-shadow;
   overflow: hidden;
   z-index: 1000;
-    @include clearfix;
 
   .breadcrumbs {
     margin-right: 10px;
@@ -142,14 +141,14 @@ button.ui-multiselect {
     }
 
     .home {
-            font-weight: bold;
+      font-weight: $font-weight-bold;
     }
 
     .separator {
       position: relative;
       top: -1px;
       padding: 0 .2em;
-            font-weight: bold;
+      font-weight: $font-weight-bold;
     }
   }
 
@@ -172,7 +171,7 @@ button.ui-multiselect {
     a {
       padding-left: 5px;
       cursor: pointer;
-            @include user-select(none);
+      user-select: none;
     }
   }
 
@@ -213,9 +212,8 @@ button.ui-multiselect {
 }
 
 
-/**
+//== Other elements
- * Other elements
+//
- */
 
 .clearfix {
   @include clearfix;
@@ -233,12 +231,9 @@ button.ui-multiselect {
   display: none;
 }
 
-/**
+// .editor is the classname for field editors of sprint,
- * .editor is the classname for field editors of sprint,
+// story, task, impediment. These field editors get created
- * story, task, impediment. These field editors get created
+// at runtime whenever any of the above models are edited.
- * at runtime whenever any of the above models are edited.
- */
-
 .ui-dialog .editor {
   display: block;
 }
@@ -247,9 +242,9 @@ ul.ui-sortable {
   min-height: 20px;
 }
 
-/**
+//== Story tooltip
- * Story tooltip
+//
- */
+
 .ui-tooltip {
   .ui-tooltip-content {
     hr {
@@ -284,7 +279,7 @@ ul.ui-sortable {
       margin-left: -160px;
       padding-right: 5px;
       float: left;
-            font-weight: bold;
+      font-weight: $font-weight-bold;
     }
   }
 }
@@ -293,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 {
@@ -304,14 +298,13 @@ ul.ui-sortable {
 }
 
 .w-rb-header-collapsed {
-    height: 18px;
+  height: 27px; // 14px * .86 * 1.42857 + 2 * 5px
   overflow: hidden;
 }
 
 
-/**
+//== Fix jQuery-UI datepicker
- * Fix jQuery-UI datepicker
+//
- */
 
 body {
   .ui-widget {

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

@@ -1,3 +1,4 @@
+// scss-lint:disable Comment
 @import "../common";
 
 /*
@@ -31,7 +32,7 @@
 .ui-helper-clearfix {
   display: inline-block;
 
-    &:after {
+  &::after {
     display: block;
     height: 0;
     clear: both;
@@ -65,7 +66,7 @@
 ----------------------------------*/
 
 .ui-state-disabled {
-    cursor: default !important;
+  cursor: default !important; // scss-lint:disable ImportantRule
 }
 
 /* Icons
@@ -121,7 +122,7 @@
   border: 0 none;
   background: $header-bg;
   color: $header-text;
-    font-weight: bold;
+  font-weight: $font-weight-bold;
 
   a {
     color: $header-text;
@@ -211,6 +212,10 @@
   text-decoration: none;
 }
 
+.ui-sortable-helper {
+  @include nice-shadow(4);
+}
+
 
 /* Interaction Cues
 ----------------------------------*/
@@ -240,7 +245,7 @@
 
 .ui-priority-primary,
 .ui-widget-content .ui-priority-primary {
-    font-weight: bold;
+  font-weight: $font-weight-bold;
 }
 
 .ui-priority-secondary,
@@ -516,7 +521,7 @@
 
 .ui-widget-overlay {
   background: #000;
-    opacity: .30;
+  opacity: .3;
 }
 
 .ui-widget-shadow {
@@ -524,7 +529,7 @@
   padding: 8px;
   border-radius: 8px;
   background: #aaa;
-    opacity: .30;
+  opacity: .3;
 }
 
 /* Resizable
@@ -626,7 +631,7 @@
   }
 
   .ui-accordion-header-active {
-        border-bottom: 0 !important;
+    border-bottom: 0 !important; // scss-lint:disable ImportantRule
   }
 
   .ui-accordion-header a {
@@ -689,6 +694,7 @@
 ----------------------------------*/
 
 .ui-menu {
+  @include nice-shadow(2);
   display: block;
   margin: 0;
   padding: 2px;
@@ -725,9 +731,9 @@
   position: relative;
   margin-right: .1em;
   padding: 0;
-    cursor: pointer;
   text-align: center;
-    text-decoration: none !important;
+  text-decoration: none !important; // scss-lint:disable ImportantRule
+  cursor: pointer;
   overflow: visible;
   zoom: 1;
 }
@@ -893,8 +899,8 @@ button.ui-button::-moz-focus-inner {
       margin: .5em .4em .5em 0;
       padding: .2em .6em .3em;
       float: right;
-            cursor: pointer;
       line-height: 1.4em;
+      cursor: pointer;
       overflow: visible;
     }
   }
@@ -1000,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;
 
@@ -1042,7 +1048,7 @@ button.ui-button::-moz-focus-inner {
   }
 
   .ui-tabs-hide {
-        display: none !important;
+    display: none !important; // scss-lint:disable ImportantRule
   }
 }
 
@@ -1054,21 +1060,22 @@ button.ui-button::-moz-focus-inner {
 ----------------------------------*/
 
 .ui-datepicker {
+  @include nice-shadow(3);
   width: 16em;
-    padding: 3px;
+  padding: .3em .6em .6em;
-    border: 1px solid $panel-border;
+  border: 0 none;
   background: $body-bg;
   color: $text-color;
   font-size: $font-size-base;
-    box-shadow: $panel-shadow;
 
   .ui-datepicker-header {
     position: relative;
+    margin: 0 -.3em;
     padding: .3em;
     border: 0 none;
     background: $header-bg;
     color: $header-text;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
   }
 
   .ui-state-default {
@@ -1169,7 +1176,7 @@ button.ui-button::-moz-focus-inner {
   th {
     padding: .7em .3em;
     border: 0 none;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
     text-align: center;
   }
 
@@ -1188,6 +1195,7 @@ button.ui-button::-moz-focus-inner {
   }
 
   .ui-datepicker-calendar {
+    margin: 0;
     table-layout: fixed;
 
     td {
@@ -1243,8 +1251,13 @@ button.ui-button::-moz-focus-inner {
   }
 
   .ui-datepicker-buttonpane {
+    @include clearfix;
+    margin: .6em 0 0;
+    padding: .6em 0 0;
+
     button {
-            padding: $input-padding-vertical $input-padding-horizontal;
+      margin: 0;
+      padding: $btn-padding-vertical $btn-padding-horizontal;
     }
 
     .ui-state-default {

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

@@ -11,13 +11,13 @@
 
 .ui-multiselect-single .ui-multiselect-checkboxes {
   input {
-        position: absolute !important;
+    position: absolute !important; // scss-lint:disable ImportantRule
-        top: auto !important;
+    top: auto !important; // scss-lint:disable ImportantRule
     left: -9999px;
   }
 
   label {
-        padding: 5px !important;
+    padding: 5px !important; // scss-lint:disable ImportantRule
   }
 }
 
@@ -54,11 +54,11 @@
 }
 
 .ui-multiselect-menu {
+  @include nice-shadow(2);
   display: none;
   position: absolute;
   padding: 3px;
   text-align: left;
-    box-shadow: $panel-shadow;
   z-index: 10000;
 }
 
@@ -83,7 +83,7 @@
     padding-left: 20px + 6px;
     border: 1px solid transparent;
     cursor: default;
-        @include user-select(none);
+    user-select: none;
 
     input {
       position: relative;
@@ -98,7 +98,7 @@
     &.ui-multiselect-optgroup-label {
       margin-bottom: 2px;
       border-bottom: 1px solid $panel-border;
-            font-weight: bold;
+      font-weight: $font-weight-bold;
       text-align: center;
 
       a {
@@ -111,8 +111,7 @@
   }
 }
 
-/* remove label borders in IE6 because IE6 does not support transparency */
+// Remove label borders in IE6 because IE6 does not support transparency
-
 * html .ui-multiselect-checkboxes label {
   border: 0 none;
 }

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

@@ -10,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;
-    box-shadow: 0 2px 2px rgba(#000, .2);
   overflow: hidden;
 }
 

src/sass/plugins/redmine_backlogs/master_backlog.scss

@@ -22,7 +22,7 @@ $story-sp-input-width:          50px;
     background-color: $background;
     color: $color;
 
-        &:before {
+    &::before {
       color: mix($color, $background, 50%);
     }
 
@@ -32,27 +32,23 @@ $story-sp-input-width:          50px;
       } @else {
         background-color: darken($background, 10%);
       }
-            text-decoration: none;
     }
   }
 }
 
 
-/**
+// Reserved classes are
- * reserved classes are
+// .backlog (used in master_backlog.js to initialize all backlogs)
- * .backlog (used in master_backlog.js to initialize all backlogs)
+// .model (used in backlog.js editable_inplace.js model.js)
- * .model (used in backlog.js editable_inplace.js model.js)
+// .sprint (used in backlog.js
- * .sprint (used in backlog.js
+// .stories (used in backlog.js for sortable)
- * .stories (used in backlog.js for sortable)
+// .editor
- * .editor
+// .editable (bind click on)
- * .editable (bind click on)
+// .close_sprint (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;
-        box-shadow: $panel-shadow;
 
     @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 {
@@ -211,7 +203,7 @@ $story-sp-input-width:          50px;
 
     .name {
       padding-left: $padding-base-horizontal;
-            font-weight: bold;
+      font-weight: $font-weight-bold;
       overflow: hidden;
     }
 
@@ -287,7 +279,7 @@ $story-sp-input-width:          50px;
         $name-width-minus: $header-right-width-wider + 35px;
 
         position: relative;
-                width: calc(100% - #{$name-width-minus}) !important;
+        width: calc(100% - #{$name-width-minus}) !important; // scss-lint:disable ImportantRule
         min-width: 128px;
         margin-left: $header-line-height - 2px;
         float: left;
@@ -307,20 +299,20 @@ $story-sp-input-width:          50px;
     .menu {
       position: relative;
       height: $header-line-height;
+      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;
-            cursor: pointer;
       font-size: $font-size-small;
       line-height: $line-height-base;
+      cursor: pointer;
       overflow: visible;
-            @include transition(background-color 0s .1s, border-color 0s .1s);
 
       &:hover {
+        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 {
@@ -491,26 +481,46 @@ $story-sp-input-width:          50px;
           display: block;
           padding: $tracker-list-padding;
           border-radius: $border-radius-small ($border-radius-small * 3) ($border-radius-small * 3) $border-radius-small;
+          @if $color-trackers {
+            background-color: $tracker-default-bg;
+            color: $tracker-default-text;
+          } @else {
             background-color: darken($gray-lightest, 3%);
             color: $gray-dark;
-                    font-weight: bold;
+          }
+          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%);
+            } @else {
               color: $gray-light;
+            }
             font-weight: normal;
             content: "#";
           }
 
           &:hover {
+            @if $color-trackers {
+              background-color: darken($tracker-default-bg, 10%);
+            } @else {
               background-color: $gray-lighter;
+            }
             text-decoration: none;
           }
         }
       }
     }
 
+    .fff-left > .project,
+    .fff-wrapmiddle > .fff-middle,
+    .fff-right > .status_id,
+    .fff-right > .story_points {
+      min-height: floor(.92 * $font-size-base * $line-height-base);
+    }
+
     .project {
       display: block;
       position: relative;
@@ -526,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 {
@@ -586,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;
@@ -630,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;
@@ -666,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;
@@ -677,20 +687,19 @@ $story-sp-input-width:          50px;
   }
 
   @if $color-trackers {
-        @include rb-tracker('.tracker1', $tracker-1-bg, $tracker-1-text);
+    @each $tracker-id, $tracker-colors in $tracker-colors-map {
-        @include rb-tracker('.tracker2', $tracker-2-bg, $tracker-2-text);
+      @include rb-tracker(
-        @include rb-tracker('.tracker3', $tracker-3-bg, $tracker-3-text);
+        ".tracker#{$tracker-id}",
-        @include rb-tracker('.tracker4', $tracker-4-bg, $tracker-4-text);
+        map-get($tracker-colors, background),
-        @include rb-tracker('.tracker5', $tracker-5-bg, $tracker-5-text);
+        map-get($tracker-colors, color)
-        @include rb-tracker('.tracker6', $tracker-6-bg, $tracker-6-text);
+      );
-        @include rb-tracker('.tracker7', $tracker-7-bg, $tracker-7-text);
+    }
   }
 }
 
 
-/**
+//== Dialog
- * dialog
+//
- */
 
 .ui-dialog {
   .ui-dialog-titlebar-close {
@@ -703,8 +712,8 @@ $story-sp-input-width:          50px;
   }
 
   &.ui-widget-content {
+    @include nice-shadow(5);
     border: 0 none;
-        box-shadow: 2px 2px 5px #777;
   }
 
   .ui-dialog-buttonpane.ui-widget-content {
@@ -730,9 +739,8 @@ $story-sp-input-width:          50px;
 }
 
 
-/**
+//== In-place Sprint Editor
- * In-place Sprint Editor
+//
- */
 
 #backlogs_container {
 
@@ -744,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;
-            cursor: pointer;
       font-weight: $btn-font-weight;
       text-align: center;
       white-space: nowrap;
-            @include button-size($input-padding-vertical, $input-padding-horizontal, $font-size-base, $line-height-base, $border-radius-base);
+      cursor: pointer;
-            @include user-select(none);
+      user-select: none;
-            @include transition(background-color ease-in-out .07s, border-color ease-in-out .07s, box-shadow ease-in-out .07s);
 
       &.save {
         @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
@@ -771,17 +781,13 @@ $story-sp-input-width:          50px;
       &:active {
         text-decoration: none;
       }
-
-            @media screen and (max-width: $screen-md-max) {
-                padding: $input-padding-vertical;
-                font-size: $font-size-small-px;
-                line-height: $line-height-computed;
-            }
     }
   }
 }
 
-/* In-place Story Editor */
+
+//== In-place Story Editor
+//
 
 .debug {
   .story {
@@ -809,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 */
+//== 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;
 }
-
-/* show completed sprints */
-
-#show_completed_sprints {
-    margin-left: $padding-side / 2;
-    cursor: pointer;
-    color: $gray-darkest;
-}

src/sass/plugins/redmine_backlogs/taskboard.scss

@@ -43,14 +43,14 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
 }
 
 
-/**
+//== Swimlane
- * swimlane class is used by:
+//
- * - #board_header
+// Swimlane class is used by:
- * - .board
+// - #board_header
- *
+// - .board
- * Also use by the Column Width preference to determine the unit width of the
+// Also use by the Column Width preference to determine the unit width of the
- * swimlanes. See RB.Taskboard.initialize()
+// 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;
@@ -73,7 +75,7 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
     border-right: 1px dotted mix($header-bg, $header-text, 70%);
     background-color: $header-bg;
     color: $header-text;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
     text-align: center;
     vertical-align: middle;
 
@@ -161,7 +163,7 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
     a {
       color: $gray-darkest;
       font-size: $font-size-small-px;
-            font-weight: bold;
+      font-weight: $font-weight-bold;
     }
 
     .assignee {
@@ -198,7 +200,7 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
     border-radius: 50%;
     background-color: $brand-warning;
     color: $brand-text;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
     line-height: 36px;
     text-align: center;
 
@@ -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,
@@ -223,10 +227,10 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
     border: 0 none;
     border-radius: $border-radius-large;
     background-color: $gray-lighter;
-        cursor: move;
     color: $gray-darker;
     font-size: 10px;
     line-height: 1.3;
+    cursor: move;
   }
 
   .placeholder {
@@ -244,7 +248,7 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
     border-radius: $border-radius-base;
     background-color: $body-bg;
     font-size: $font-size-small-px;
-        font-weight: bold;
+    font-weight: $font-weight-bold;
     line-height: 16px;
     text-align: right;
     opacity: .8;
@@ -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;
-        box-shadow: 2px 2px 5px #777;
   }
 
   .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 {