Release v2.2.0

Resolve tooltip positioning issues

.scss-lint.yml

@@ -81,7 +81,7 @@ linters:
 
   NestingDepth:
     enabled: true
-    max_depth: 6
+    max_depth: 7
 
   PlaceholderInExtend:
     enabled: true

Gruntfile.js

@@ -6,7 +6,13 @@ module.exports = function (grunt) {
       options: {
         implementation: require('node-sass'),
         sourceMap: false,
-        outputStyle: 'compressed'
+        outputStyle: 'compressed',
+        functions: {
+          'inline-svg': require('sass-inline-svg')('./svg', {
+            optimize: true,
+            encodingFormat: 'uri'
+          })
+        }
       },
 
       theme: {

README.md

@@ -8,7 +8,7 @@ A free Redmine theme for modern browsers.
 
 ![Screenshot](https://github.com/mrliptontea/PurpleMine2/raw/master/screenshots/issues.png)
 
-Compatible with Redmine 2.6+ and browsers: IE10+/Edge, latest Firefox and Google Chrome (others were not tested).
+Compatible with Redmine 3.0+ 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.
 
@@ -56,6 +56,15 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe
 
 ## Changelog
 
+v2.2.0 (2019-04-09):
+
+* Fixed #101, #102: tooltip positioning
+
+v2.1.1 (2019-03-23):
+
+* Fixed sidebar toggler style when fixed layout is enabled
+* Fixed contextual dropdown padding in mobile view
+
 v1.11.0 (2019-03-22):
 
 * Backported fixes from v2:
@@ -72,6 +81,36 @@ v1.11.0 (2019-03-22):
   * Improved Redmine 4.0 compatibility
   * Updated Font Awesome icons to 4.7.0
 
+v2.1.0 (2019-03-22):
+
+* Added CSS grid layout support (off by default because of IE support)
+* Fixed styling of some flash messages
+* Fixed horizontal scrollbar appearing when sidebar is on the right
+* Fixed footer being mispositioned in Agile charts
+* Improved support for [Redmine Tags](https://www.redmineup.com/pages/plugins/tags) plugin
+* Fixed positioning of admin menu icons for some plugins
+* Added separator line between news on the news list
+* Fixed #93: Agile chart expanding indefinitely when Additional "Go to top" link is enabled
+* Fixed #94: subtasks indentation
+* Improved progress bar styling, avatar positioning, WYSIWYG button styling, wiki preview font sizes
+
+v2.0.2 (2019-03-20):
+
+* Fixed #89: [RM+ custom menu](http://rmplus.pro/en/redmine/plugins/custom_menu) breaking the layout
+
+v2.0.1 (2019-03-17):
+
+* Fixed #90: regression in some sidebar layouts
+* Removed reduntant `abbr[title]` styles
+
+v2.0 (2019-03-13):
+
+* Refreshed, modernized look & feel
+* Added priority icons
+* Removed `$color-priorities` setting and styles
+* Improved Redmine 4.0 compatibility
+* Updated Font Awesome icons to 4.7.0
+
 v1.10.0 (2019-03-12):
 
 * Fixed #86: added support for redmine_hearts plugin

package-lock.json

@@ -127,12 +127,12 @@
       "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
     },
     "autoprefixer": {
-      "version": "9.4.8",
+      "version": "9.4.10",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.8.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.10.tgz",
-      "integrity": "sha512-DIhd0KMi9Nql3oJkJ2HCeOVihrXFPtWXc6ckwaUNwliDOt9OGr0fk8vV8jCLWXnZc1EXvQ2uLUzGpcPxFAQHEQ==",
+      "integrity": "sha512-XR8XZ09tUrrSzgSlys4+hy5r2/z4Jp7Ag3pHm31U4g/CTccYPOVe19AkaJ4ey/vRd1sfj+5TtuD6I0PXtutjvQ==",
       "requires": {
-        "browserslist": "^4.4.1",
+        "browserslist": "^4.4.2",
-        "caniuse-lite": "^1.0.30000938",
+        "caniuse-lite": "^1.0.30000940",
         "normalize-range": "^0.1.2",
         "num2fraction": "^1.2.2",
         "postcss": "^7.0.14",
@@ -200,6 +200,11 @@
         "tweetnacl": "^0.14.3"
       }
     },
+    "bindings": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.2.1.tgz",
+      "integrity": "sha1-FK1hE4EtLTfXLme0ystLtyZQXxE="
+    },
     "block-stream": {
       "version": "0.0.9",
       "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
@@ -219,6 +224,11 @@
         "safe-json-parse": "~1.0.1"
       }
     },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -278,9 +288,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30000939",
+      "version": "1.0.30000945",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000939.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000945.tgz",
-      "integrity": "sha512-oXB23ImDJOgQpGjRv1tCtzAvJr4/OvrHi5SO2vUgB0g0xpdZZoA/BxfImiWfdwoYdUTtQrPsXsvYU/dmCSM8gg=="
+      "integrity": "sha512-PSGwYChNIXJ4FZr9Z9mrVzBCB1TF3yyiRmIDRIdKDHZ6u+1jYH6xeR28XaquxnMwcZVX3f48S9zi7eswO/G1nQ=="
     },
     "caseless": {
       "version": "0.12.0",
@@ -309,6 +319,38 @@
       "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==",
       "dev": true
     },
+    "clap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/clap/-/clap-1.2.3.tgz",
+      "integrity": "sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA==",
+      "requires": {
+        "chalk": "^1.1.3"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        }
+      }
+    },
     "cli-cursor": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
@@ -354,6 +396,14 @@
         }
       }
     },
+    "coa": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/coa/-/coa-1.0.4.tgz",
+      "integrity": "sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=",
+      "requires": {
+        "q": "^1.1.2"
+      }
+    },
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -434,6 +484,38 @@
         "which": "^1.2.9"
       }
     },
+    "css-select": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
+      "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
+      "requires": {
+        "boolbase": "~1.0.0",
+        "css-what": "2.1",
+        "domutils": "1.5.1",
+        "nth-check": "~1.0.1"
+      }
+    },
+    "css-what": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
+      "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg=="
+    },
+    "csso": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-2.0.0.tgz",
+      "integrity": "sha1-F4tDpEYhIhwndWCG9THgL0KQDug=",
+      "requires": {
+        "clap": "^1.0.9",
+        "source-map": "^0.5.3"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
+      }
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -459,6 +541,15 @@
         "meow": "^3.3.0"
       }
     },
+    "deasync": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/deasync/-/deasync-0.1.14.tgz",
+      "integrity": "sha512-wN8sIuEqIwyQh72AG7oY6YQODCxIp1eXzEZlZznBuwDF8Q03Tdy9QNp1BNZXeadXoklNrw+Ip1fch+KXo/+ASw==",
+      "requires": {
+        "bindings": "~1.2.1",
+        "node-addon-api": "^1.6.0"
+      }
+    },
     "debug": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
@@ -539,6 +630,37 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-serializer": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
+      "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
+      "requires": {
+        "domelementtype": "^1.3.0",
+        "entities": "^1.1.1"
+      }
+    },
+    "domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
+    },
+    "domhandler": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+      "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+      "requires": {
+        "domelementtype": "1"
+      }
+    },
+    "domutils": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
+      "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+      "requires": {
+        "dom-serializer": "0",
+        "domelementtype": "1"
+      }
+    },
     "duplexer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
@@ -554,9 +676,14 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.3.113",
+      "version": "1.3.115",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.113.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.115.tgz",
-      "integrity": "sha512-De+lPAxEcpxvqPTyZAXELNpRZXABRxf+uL/rSykstQhzj/B0l1150G/ExIIxKc16lI89Hgz81J0BHAcbTqK49g=="
+      "integrity": "sha512-mN2qeapQWdi2B9uddxTZ4nl80y46hbyKY5Wt9Yjih+QZFQLdaujEDK4qJky35WhyxMzHF3ZY41Lgjd2BPDuBhg=="
+    },
+    "entities": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
     },
     "error": {
       "version": "7.0.2",
@@ -1479,6 +1606,39 @@
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.6.0.tgz",
       "integrity": "sha512-lIbgIIQA3lz5XaB6vxakj6sDHADJiZadYEJB+FgA+C4nubM1NwcuvUr9EJPmnH1skZqpqUzWborWo8EIUi0Sdw=="
     },
+    "htmlparser2": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
+      "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
+      "requires": {
+        "domelementtype": "^1.3.1",
+        "domhandler": "^2.3.0",
+        "domutils": "^1.5.1",
+        "entities": "^1.1.1",
+        "inherits": "^2.0.1",
+        "readable-stream": "^3.1.1"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.2.0.tgz",
+          "integrity": "sha512-RV20kLjdmpZuTF1INEb9IA3L68Nmi+Ri7ppZqo78wj//Pn62fCoJyV9zalccNzDD/OuJpMG4f+pfMl8+L6QdGw==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.2.0.tgz",
+          "integrity": "sha512-6YqyX6ZWEYguAxgZzHGL7SsCeGx3V2TtOTqZz1xSTSWnqsbWwbptafNyvf/ACquZUXV3DANr5BDIwNYe1mN42w==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
     "http-parser-js": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.0.tgz",
@@ -1934,6 +2094,11 @@
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
       "dev": true
     },
+    "mini-svg-data-uri": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.0.3.tgz",
+      "integrity": "sha512-YBaqsh6GE+4jQhLNkFYEagH2o4bVTlGGpEvkuwtwc+1NBGXqpcVCnsUGkGp75ovPXxtF2GsDYzUwyhfC0hntiA=="
+    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -1990,6 +2155,11 @@
       "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
       "dev": true
     },
+    "node-addon-api": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-1.6.2.tgz",
+      "integrity": "sha512-479Bjw9nTE5DdBSZZWprFryHGjUaQC31y1wHo19We/k0BZlrmhqQitWoUL0cD8+scljCbIUL+E58oRDEakdGGA=="
+    },
     "node-gyp": {
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
@@ -2017,9 +2187,9 @@
       }
     },
     "node-releases": {
-      "version": "1.1.8",
+      "version": "1.1.10",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.8.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.10.tgz",
-      "integrity": "sha512-gQm+K9mGCiT/NXHy+V/ZZS1N/LOaGGqRAAJJs3X9Ah1g+CIbRcBgNyoNYQ+SEtcyAtB9KqDruu+fF7nWjsqRaA==",
+      "integrity": "sha512-KbUPCpfoBvb3oBkej9+nrU0/7xPlVhmhhUJ1PZqwIP5/1dJkRWKWD3OONjo6M2J7tSCBtDCumLwwqeI+DWWaLQ==",
       "requires": {
         "semver": "^5.3.0"
       }
@@ -2118,6 +2288,14 @@
         "set-blocking": "~2.0.0"
       }
     },
+    "nth-check": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "requires": {
+        "boolbase": "~1.0.0"
+      }
+    },
     "num2fraction": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
@@ -2486,6 +2664,11 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
+    "q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
+    },
     "qs": {
       "version": "6.6.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.6.0.tgz",
@@ -2720,6 +2903,25 @@
         "yargs": "^7.0.0"
       }
     },
+    "sass-inline-svg": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/sass-inline-svg/-/sass-inline-svg-1.2.0.tgz",
+      "integrity": "sha512-4fBlpj2QWo/zk6a23Twz4O7yroAs5vrN7l34X4LQREL2kGlyjeObHc4uGRkBUjuwO57ZsUJNCJAq3fYm7I/b4Q==",
+      "requires": {
+        "css-select": "^1.2.0",
+        "deasync": "^0.1.7",
+        "dom-serializer": "^0.1.0",
+        "htmlparser2": "^3.9.0",
+        "mini-svg-data-uri": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "svgo": "^0.6.6"
+      }
+    },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+    },
     "scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@@ -2949,6 +3151,36 @@
         "has-flag": "^3.0.0"
       }
     },
+    "svgo": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-0.6.6.tgz",
+      "integrity": "sha1-s0CIkDbyD5tEdUMHfQ9Vc+0ETAg=",
+      "requires": {
+        "coa": "~1.0.1",
+        "colors": "~1.1.2",
+        "csso": "~2.0.0",
+        "js-yaml": "~3.6.0",
+        "mkdirp": "~0.5.1",
+        "sax": "~1.2.1",
+        "whet.extend": "~0.9.9"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "2.7.3",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz",
+          "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE="
+        },
+        "js-yaml": {
+          "version": "3.6.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.6.1.tgz",
+          "integrity": "sha1-bl/mfYsgXOTSL60Ft3geja3MSzA=",
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^2.6.0"
+          }
+        }
+      }
+    },
     "symbol-observable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz",
@@ -3159,6 +3391,11 @@
       "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
       "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg=="
     },
+    "whet.extend": {
+      "version": "0.9.9",
+      "resolved": "https://registry.npmjs.org/whet.extend/-/whet.extend-0.9.9.tgz",
+      "integrity": "sha1-+HfVv2SMl+WqVC+twW1qJZucEaE="
+    },
     "which": {
       "version": "1.2.14",
       "resolved": "https://registry.npmjs.org/which/-/which-1.2.14.tgz",

package.json

@@ -20,16 +20,19 @@
   "scripts": {
     "build": "grunt",
     "watch": "grunt watch",
-    "lint": "standard && scss-lint"
+    "lint:js": "standard",
+    "lint:sass": "scss-lint",
+    "lint": "npm run -S lint:js && npm run -S lint:sass"
   },
   "dependencies": {
-    "autoprefixer": "^9.4.8",
+    "autoprefixer": "^9.4.10",
-    "grunt": "^1.0.4",
+    "grunt": "^1.0.3",
     "grunt-contrib-uglify": "^4.0.0",
     "grunt-contrib-watch": "^1.1.0",
     "grunt-postcss": "^0.9.0",
     "grunt-sass": "^3.0.2",
-    "node-sass": "^4.11.0"
+    "node-sass": "^4.11.0",
+    "sass-inline-svg": "^1.2.0"
   },
   "devDependencies": {
     "standard": "^12.0.1"

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:.92em}.ui-multiselect-header ul li{padding:0 10px 0 0;float:left}.ui-multiselect-header a{text-decoration:none}.ui-multiselect-header a:hover{text-decoration:underline}.ui-multiselect-header span.ui-icon{float:left}.ui-multiselect-header li.ui-multiselect-close{padding-right:0;float:right;text-align:right}.ui-multiselect-menu{-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);display:none;position:absolute;z-index:10000;padding:3px;text-align:left}.ui-multiselect-checkboxes{position:relative;padding-right:2px;overflow-y:scroll}.ui-multiselect-checkboxes input[type="checkbox"]{top:0;margin:3px 0 0 -20px;float:left}.ui-multiselect-checkboxes input[type="checkbox"]:focus{outline:none}.ui-multiselect-checkboxes label{display:block;padding:3px 1px;padding-left:26px;border:1px solid transparent;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui-multiselect-checkboxes label input{position:relative;top:1px}.ui-multiselect-checkboxes li{clear:both;font-size:.92em}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label{margin-bottom:2px;border-bottom:1px solid #ccc;font-weight:bold;text-align:center}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a{display:block;margin:1px 0;padding:3px;text-decoration:none}* html .ui-multiselect-checkboxes label{border:0 none}
+.ui-multiselect{padding:2px 0 2px 4px;text-align:left}.ui-multiselect span.ui-icon{float:right}.ui-multiselect-single .ui-multiselect-checkboxes input{position:absolute !important;top:auto !important;left:-9999px}.ui-multiselect-single .ui-multiselect-checkboxes label{padding:5px !important}.ui-multiselect-header{margin-bottom:3px;padding:3px}.ui-multiselect-header ul{font-size:.92em}.ui-multiselect-header ul li{padding:0 10px 0 0;float:left}.ui-multiselect-header a{text-decoration:none}.ui-multiselect-header a:hover{text-decoration:underline}.ui-multiselect-header span.ui-icon{float:left}.ui-multiselect-header li.ui-multiselect-close{padding-right:0;float:right;text-align:right}.ui-multiselect-menu{-webkit-box-shadow:0 5px 8px -2px rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.3);box-shadow:0 5px 8px -2px rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.3);display:none;position:absolute;z-index:10000;padding:3px;text-align:left}.ui-multiselect-checkboxes{position:relative;padding-right:2px;overflow-y:scroll}.ui-multiselect-checkboxes input[type="checkbox"]{top:0;margin:3px 0 0 -20px;float:left}.ui-multiselect-checkboxes 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 #dadce7;font-weight:600;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{-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);position:relative;padding:10px;overflow:hidden;border:1px solid #ccc;background-color:#fff;color:#555;font-size:.92em;text-align:left;word-wrap:break-word}.ui-tooltip-tip{border-color:#ccc;background-color:#fff}.ui-tooltip-tip{position:absolute;z-index:10;margin:0 auto;overflow:hidden;border:0 none;background:transparent}
+.qtip{position:absolute;top:-31000px;left:-31000px;width:auto;max-width:500px;outline:none}.ui-tooltip-content{-webkit-box-shadow:0 5px 8px -2px rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.3);box-shadow:0 5px 8px -2px rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.3);position:relative;padding:10px;overflow:hidden;border:1px solid #d1d3e0;background-color:#fff;color:#3e425a;font-size:.92em;text-align:left;word-wrap:break-word}.ui-tooltip-tip{border-color:#d1d3e0;background-color:#fff}.ui-tooltip-tip{position:absolute;z-index:10;margin:0 auto;overflow:hidden;border:0 none;background:transparent}

src/sass/_variables.scss

@@ -7,14 +7,14 @@
 //
 
 $fixed-layout:                  false !default;
+$css-grid-layout:               false !default;
 $flexbox-layout:                true !default;
 $sidebar-position:              left !default;
-$color-priorities:              true !default;
+$clean-issues:                  true !default;
 $color-trackers:                true !default;
-$colored-issue:                 true !default;
 $color-status:                  true !default;
+$priority-icon:                 true !default;
 $use-gravatars:                 true !default;
-$use-font-awesome:              true !default;
 $use-logo:                      false !default;
 $use-retina-logo:               false !default;
 $use-project-tiles:             true !default;
@@ -27,54 +27,111 @@ $top-menu-collapse:             false !default;
 //== Colors
 //
 
-$gray-base:                     #808080 !default;
+$blue:                          #0065ff !default;
-$gray-darkest:                  darken($gray-base, 40%) !default;
+$indigo:                        #4e65e5 !default;
-$gray-darker:                   darken($gray-base, 33%) !default;
+$purple:                        #614ba6 !default;
-$gray-dark:                     darken($gray-base, 17%) !default;
+$pink:                          #eb5286 !default;
-$gray:                          $gray-base !default;
+$red:                           #e5123d !default;
-$gray-light:                    lighten($gray-base, 17%) !default;
+$orange:                        #fc8c12 !default;
-$gray-lighter:                  lighten($gray-base, 35%) !default;
+$yellow:                        #ffc107 !default;
-$gray-lightest:                 lighten($gray-base, 46%) !default;
+$green:                         #029934 !default;
+$teal:                          #00b3ad !default;
 
-$brand-primary:                 #584492 !default;
+$white:                         #fff !default;
-$brand-text:                    #fff !default;
+$black:                         #000 !default;
-$brand-accent:                  #deddef !default;
+$gray:                          hsl(hue($indigo), 20%, 85%) !default;
 
-$brand-success:                 #019851 !default;
+$shade-map: (
-$brand-info:                    #409ae3 !default;
+  50:                           90%,
-$brand-warning:                 #ed820c !default;
+  100:                          80%,
-$brand-danger:                  #e74c3c !default;
+  200:                          65%,
+  300:                          40%,
+  400:                          20%,
+  500:                          0%,
+  600:                          20%,
+  700:                          40%,
+  800:                          65%,
+  900:                          80%,
+  950:                          90%
+) !default;
 
-$state-success:                 #b5fbb7 !default;
+@function shade($color, $shade: 500) {
-$state-info:                    #97cefb !default;
+  $mixer: if($shade < 500, $white, $black);
-$state-warning:                 #ffd699 !default;
+  $saturation: if($shade < 500, 0, ($shade - 500) / 20);
-$state-danger:                  #f7a6a4 !default;
+  @return saturate(mix($mixer, $color, map-get($shade-map, $shade)), $saturation);
+}
+
+$gray-50:                       shade($gray, 50) !default;
+$gray-100:                      shade($gray, 100) !default;
+$gray-200:                      shade($gray, 200) !default;
+$gray-300:                      shade($gray, 300) !default;
+$gray-400:                      shade($gray, 400) !default;
+$gray-500:                      $gray !default;
+$gray-600:                      shade($gray, 600) !default;
+$gray-700:                      shade($gray, 700) !default;
+$gray-800:                      shade($gray, 800) !default;
+$gray-900:                      shade($gray, 900) !default;
+$gray-950:                      shade($gray, 950) !default;
+
+$brand-primary:                 $purple !default;
+$brand-text:                    $white !default;
+$brand-accent:                  shade($brand-primary, 100) !default;
+
+$brand-success:                 $green !default;
+$brand-info:                    $blue !default;
+$brand-warning:                 $orange !default;
+$brand-danger:                  $red !default;
+
+$state-success:                 shade($green, 100) !default;
+$state-info:                    shade($blue, 100) !default;
+$state-warning:                 shade($orange, 100) !default;
+$state-danger:                  shade($red, 100) !default;
 
 
 //== Scaffolding
 //
 
-$body-bg:                       #fff !default;
+$body-bg:                       $white !default;
-$text-color:                    $gray-dark !default;
+$text-color:                    $gray-800 !default;
 
-$link-color:                    #4183c4 !default;
+$link-color:                    shade($blue, 600) !default;
-$link-hover-color:              darken($link-color, 10%) !default;
+$link-hover-color:              $blue !default;
 $link-hover-decoration:         underline !default;
 $link-closed-decoration:        line-through !default;
-$link-color-issue-closed:       $gray !default;
+$link-color-issue-closed:       $gray-700 !default;
-$link-color-project-closed:     $gray !default;
+$link-color-project-closed:     $gray-700 !default;
-$link-color-user-locked:        $gray !default;
+$link-color-user-locked:        $gray-700 !default;
 
 
 //== Typography
 //
 
-$font-family-sans-serif:        "Helvetica Neue", Helvetica, Arial, freesans, sans-serif !default;
+$font-family-sans-serif:        system-ui,
+                                /* macOS 10.11-10.12 */ -apple-system,
+                                /* Windows 6+ */ Segoe UI,
+                                /* Android 4+ */ Roboto,
+                                /* Ubuntu 10.10+ */ Ubuntu,
+                                /* Gnome 3+ */ Cantarell,
+                                /* KDE Plasma 5+ */ Noto Sans,
+                                /* fallback */ sans-serif,
+                                /* macOS emoji */ "Apple Color Emoji",
+                                /* Windows emoji */ "Segoe UI Emoji",
+                                /* Windows emoji */ "Segoe UI Symbol",
+                                /* Linux emoji */ "Noto Color Emoji" !default;
+
+$font-family-monospace:         /* macOS 10.10+ */ Menlo,
+                                /* Windows 6+ */ Consolas,
+                                /* Android 4+ */ Roboto Mono,
+                                /* Ubuntu 10.10+ */ Ubuntu Monospace,
+                                /* KDE Plasma 5+ */ Noto Mono,
+                                /* KDE Plasma 4+ */ Oxygen Mono,
+                                /* Linux/OpenOffice fallback */ Liberation Mono,
+                                /* fallback */ monospace !default;
 
-$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-weight-semi-bold:         500 !default;
+$font-weight-bold:              600 !default;
 
 $font-size-base:                14px !default;
 $font-size-large:               1.285em !default;
@@ -94,22 +151,22 @@ $line-height-base:              1.428571429 !default; // 20/14
 $line-height-large:             1.33 !default;
 $line-height-computed:          floor(($font-size-base * $line-height-base)) !default; // ~20px
 
-$headings-font-weight:          700 !default;
+$headings-font-weight:          600 !default;
 $headings-line-height:          1.4 !default;
-$headings-anchor-color:         $gray-lighter !default;
+$headings-anchor-color:         $gray-400 !default;
-$headings-anchor-color-active:  $gray-light !default;
+$headings-anchor-color-active:  $gray-600 !default;
 
 
 //== Wiki
 //
 
-$wiki-text:                     #333 !default;
+$wiki-text:                     $gray-950 !default;
 $wiki-font-size:                16px !default;
 $wiki-line-height:              1.6 !default;
-$wiki-preview-bg:               #fcfcfc !default;
+$wiki-preview-bg:               $body-bg !default;
 
 $toc-active-link:               darken($link-color, 10%) !default;
-$toc-active-link-hover:         darken($toc-active-link, 10%) !default;
+$toc-active-link-hover:         shade($toc-active-link, 700) !default;
 $toc-active-border:             $link-color !default;
 
 
@@ -130,13 +187,13 @@ $border-radius-base:            3px !default;
 $border-radius-large:           4px !default;
 $border-radius-small:           2px !default;
 
-$hr-border:                     $gray-light !default;
+$hr-border:                     $gray-600 !default;
-$abbr-border-color:             $gray-light !default;
+$abbr-border-color:             $gray-600 !default;
-$blockquote-border-color:       rgba(#000, .15) !default;
+$blockquote-border-color:       rgba($black, .15) !default;
 
-$component-color:               $gray-dark !default;
+$component-color:               $text-color !default;
-$component-bg:                  lighten($gray-lightest, 2%) !default;
+$component-bg:                  $gray-50 !default;
-$component-border:              lighten($gray-lighter, 2%) !default;
+$component-border:              $gray-300 !default;
 
 $component-active-color:        $brand-text !default;
 $component-active-bg:           $brand-primary !default;
@@ -144,7 +201,10 @@ $component-active-border:       $brand-primary !default;
 
 $font-size-list:                .92em !default;
 
-$collapsible-animation-time:    .3s !default;
+$transition-time:               50ms !default;
+$transition-time-long:          150ms !default;
+
+$collapsible-animation-time:    300ms !default;
 $collapsible-max-height:        10000px !default;
 
 
@@ -155,43 +215,85 @@ $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-item-border:        0 !default;
 $table-list-color-odd-rows:     true !default;
 $table-list-color-even-rows:    false !default;
-$table-list-highlight-rows:     false !default;
+$table-list-highlight-rows:     true !default;
 
 $table-bg:                      transparent !default;
-$table-accent-factor:           .03 !default;
+$table-accent-factor:           .15 !default;
-$table-hover-factor:            .03 !default;
+$table-hover-factor:            .4 !default;
-$table-bg-accent:               rgba(#000, $table-accent-factor) !default;
+$table-bg-accent:               rgba($gray-500, $table-accent-factor) !default;
-$table-bg-hover:                rgba(#000, $table-hover-factor) !default;
+$table-bg-hover:                rgba($gray-500, $table-hover-factor) !default;
 $table-bg-active:               $table-bg-hover !default;
 
-$table-border-color:            darken($body-bg, 13.5%) !default;
+$table-border-color:            $gray-300 !default;
+
+
+//== Issue statuses
+//
+
+$status-default-bg:             $brand-primary !default;
+$status-default-color:          $brand-text !default;
+$status-default-colors-map: (
+  status-1: (
+    background:                 shade($blue, 500),
+    color:                      $white
+  ),
+  closed: (
+    background:                 shade($red, 500),
+    color:                      $white
+  )
+) !default;
+$status-custom-colors-map:      () !default;
+$status-colors-map:             map-merge($status-default-colors-map, $status-custom-colors-map);
 
 
 //== Trackers priorities
 //
 
-$priority-lowest-bg:            #dff4d0 !default;
+$priority-icon-size:            14px !default;
-$priority-lowest-text:          #676 !default;
+$priority-icon-space:           5px !default;
-$priority-lowest-link:          #096 !default;
+$priority-default-icons-map: (
-
+  lowest: (
-$priority-default-bg:           #fff !default;
+    icon:                       "priority-minor.svg",
-$priority-default-text:         $text-color !default;
+    color:                      $green
-$priority-default-link:         $link-color !default;
+  ),
-
+  low2: (
-$priority-high3-bg:             #d5eaff !default;
+    icon:                       "priority-lowest.svg",
-$priority-high3-text:           #556 !default;
+    color:                      mix($teal, $green)
-$priority-high3-link:           #05a !default;
+  ),
-
+  low3: (
-$priority-high2-bg:             #ffe1d7 !default;
+    icon:                       "priority-low.svg",
-$priority-high2-text:           #855 !default;
+    color:                      $teal
-$priority-high2-link:           #b04 !default;
+  ),
-
+  default: (
-$priority-highest-bg:           #ffa5a5 !default;
+    icon:                       "priority-medium.svg",
-$priority-highest-text:         #944 !default;
+    color:                      $blue
-$priority-highest-link:         #a03 !default;
+  ),
+  high5: (
+    icon:                       "priority-high.svg",
+    color:                      $purple
+  ),
+  high4: (
+    icon:                       "priority-high.svg",
+    color:                      $orange
+  ),
+  high3: (
+    icon:                       "priority-highest.svg",
+    color:                      mix($red, $orange)
+  ),
+  high2: (
+    icon:                       "priority-major.svg",
+    color:                      $red
+  ),
+  highest: (
+    icon:                       "priority-critical.svg",
+    color:                      shade($red, 600)
+  )
+) !default;
+$priority-custom-icons-map:     () !default;
+$priority-icons-map:            map-merge($priority-default-icons-map, $priority-custom-icons-map);
 
 
 //== Trackers links
@@ -200,37 +302,37 @@ $priority-highest-link:         #a03 !default;
 $tracker-inline-padding:        1px 5px !default;
 $tracker-list-padding:          0 6px !default;
 
-$tracker-default-bg:            #668 !default;
+$tracker-default-bg:            $gray-700 !default;
-$tracker-default-text:          $brand-text !default;
+$tracker-default-text:          $white !default;
 
 $tracker-default-colors-map: (
   1: (
-    background:                 $brand-danger,
+    background:                 $red,
-    color:                      $brand-text
+    color:                      $white
   ),
   2: (
-    background:                 $brand-info,
+    background:                 $blue,
-    color:                      $brand-text
+    color:                      $white
   ),
   3: (
-    background:                 $brand-success,
+    background:                 $green,
-    color:                      $brand-text
+    color:                      $white
   ),
   4: (
-    background:                 $brand-primary,
+    background:                 $purple,
-    color:                      $brand-text
+    color:                      $white
   ),
   5: (
-    background:                 $brand-warning,
+    background:                 $orange,
-    color:                      $brand-text
+    color:                      $white
   ),
   6: (
-    background:                 mix($brand-success, $brand-info, 50%),
+    background:                 $teal,
-    color:                      $brand-text
+    color:                      $white
   ),
   7: (
-    background:                 mix($brand-primary, $brand-warning, 50%),
+    background:                 $indigo,
-    color:                      $brand-text
+    color:                      $white
   )
 ) !default;
 $tracker-custom-colors-map:     () !default;
@@ -240,32 +342,30 @@ $tracker-colors-map:            map-merge($tracker-default-colors-map, $tracker-
 //== Diffs
 //
 
-$diff-out-color:                #511 !default;
+$diff-out-bg:                   saturate(shade($red, 100), 50%) !default;
-$diff-out-bg:                   #fbb !default;
+$diff-out-bg-light:             rgba($diff-out-bg, .4) !default;
-$diff-out-bg-light:             rgba($diff-out-bg, .3) !default;
 
-$diff-in-color:                 #350 !default;
+$diff-in-bg:                    saturate(shade($green, 100), 50%) !default;
-$diff-in-bg:                    #afa !default;
+$diff-in-bg-light:              rgba($diff-in-bg, .4) !default;
-$diff-in-bg-light:              rgba($diff-in-bg, .3) !default;
 
 
 //== Journal changes
 //
 
-$journal-old-value-color:       #430 !default;
+$journal-old-value-color:       saturate(shade($orange, 800), 25%) !default;
-$journal-old-value-bg:          rgba(#ffeaaa, .3) !default;
+$journal-old-value-bg:          saturate(shade($orange, 50), 50%) !default;
-$journal-new-value-color:       #350 !default;
+$journal-new-value-color:       saturate(shade($green, 800), 25%) !default;
-$journal-new-value-bg:          rgba(#bffbbf, .3) !default;
+$journal-new-value-bg:          saturate(shade($green, 50), 50%) !default;
 
 
 //== Changesets
 //
 
-$changeset-add-color:           $brand-success !default;
+$changeset-added-color:         $green !default;
-$changeset-modified-color:      $brand-warning !default;
+$changeset-modified-color:      $orange !default;
-$changeset-copied-color:        $brand-info !default;
+$changeset-copied-color:        $purple !default;
-$changeset-renamed-color:       $brand-primary !default;
+$changeset-renamed-color:       $blue !default;
-$changeset-deleted-color:       $brand-danger !default;
+$changeset-deleted-color:       $red !default;
 
 
 //== Buttons
@@ -280,44 +380,66 @@ $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-color:             $gray-900 !default;
-$btn-default-bg:                $gray-lightest !default;
+$btn-default-bg:                $gray-100 !default;
-$btn-default-border:            $gray-lighter !default;
+$btn-default-border:            $gray-500 !default;
+$btn-default-icon-color:        $gray-700 !default;
 
-$btn-primary-color:             #fff !default;
+$btn-primary-color:             $white !default;
-$btn-primary-bg:                $brand-info !default;
+$btn-primary-bg:                $blue !default;
 $btn-primary-border:            $btn-primary-bg !default;
 
-$btn-success-color:             #fff !default;
+$btn-success-color:             $white !default;
-$btn-success-bg:                $brand-success !default;
+$btn-success-bg:                $green !default;
 $btn-success-border:            $btn-success-bg !default;
 
 
+//== Action icons
+//
+
+$icon-opacity:                  .7 !default;
+$icon-hover-opacity:            1 !default;
+$icon-color-map: (
+  default: (
+    normal:                     shade($brand-info, 600),
+    hover:                      shade($brand-info, 500)
+  ),
+  success: (
+    normal:                     shade($brand-success, 600),
+    hover:                      shade($brand-success, 500)
+  ),
+  danger: (
+    normal:                     shade($brand-danger, 600),
+    hover:                      shade($brand-danger, 500)
+  )
+) !default;
+
+
 //== Highlights
 //
 
-$highlight-bg:                  #fff9c8 !default;
+$highlight-bg:                  shade($yellow, 200) !default;
-$highlight-border:              #ccb37b !default;
+$highlight-border:              shade($yellow, 600) !default;
-$highlight-text:                #755e40 !default;
+$highlight-text:                shade($yellow, 800) !default;
-$highlight-link:                #005f97 !default;
+$highlight-link:                mix($yellow, $link-color) !default;
 
 
 //== Forms
 //
 
-$input-bg:                      #fff !default;
+$input-bg:                      $white !default;
-$input-bg-disabled:             $gray-lighter !default;
+$input-bg-disabled:             $gray-300 !default;
 
-$input-color:                   $gray-dark !default;
+$input-color:                   $text-color !default;
-$input-border:                  #ccc !default;
+$input-border:                  $gray-500 !default;
 
 $input-border-radius:           $border-radius-small !default;
 $input-border-radius-large:     $border-radius-large !default;
 
-$input-border-focus:            $brand-primary !default;
+$input-border-focus:            saturate($brand-primary, 25%) !default;
 $input-border-focus-alpha:      .6 !default;
 $input-shadow-focus-alpha:      .2 !default;
-$input-color-placeholder:       #999 !default;
+$input-color-placeholder:       $gray-600 !default;
 
 $input-padding-vertical:        $btn-padding-vertical !default;
 $input-padding-horizontal:      8px !default;
@@ -328,11 +450,12 @@ $label-width:                   160px !default;
 $label-wide-width:              280px !default;
 $label-space:                   10px !default;
 
-$legend-color:                  $gray-dark !default;
+$legend-color:                  $gray-800 !default;
-$legend-border-color:           #e5e5e5 !default;
+$legend-border-color:           $gray-200 !default;
 
-$check-input-gutter:            20px !default;
+$check-input-gutter:            18px !default;
 $check-input-margin-vertical:   3px !default;
+$check-input-margin-btn-v:      7px !default;
 $check-input-margin-horizontal: 8px !default;
 
 $check-list-max-height:         20 * $line-height-computed;
@@ -341,10 +464,10 @@ $check-list-offset-top:         $input-padding-vertical + 1px;
 //== Top
 //
 
-$top-menu-bg:                   darken($brand-primary, 15%) !default;
+$top-menu-bg:                   shade($brand-primary, 700) !default;
-$top-menu-text:                 $brand-accent !default;
+$top-menu-text:                 shade($brand-primary, 100) !default;
-$top-menu-link:                 $brand-accent !default;
+$top-menu-link:                 shade($brand-primary, 100) !default;
-$top-menu-link-hover:           $brand-text !default;
+$top-menu-link-hover:           shade($brand-primary, 50) !default;
 
 $header-bg:                     $brand-primary !default;
 $header-text:                   $brand-text !default;
@@ -357,21 +480,21 @@ $header-title-line-height:      $line-height-computed * 1.5 !default;
 
 $responsive-header-height:      54px !default;
 
-$flyout-menu-bg:                darken($header-bg, 15%) !default;
+$flyout-menu-bg:                shade($header-bg, 800) !default;
-$flyout-menu-text:              #fff !default;
+$flyout-menu-text:              $white !default;
-$flyout-menu-link:              #fff !default;
+$flyout-menu-link:              $white !default;
 $flyout-menu-link-active-bg:    $header-bg !default;
-$flyout-menu-link-active:       #fff !default;
+$flyout-menu-link-active:       $white !default;
-$flyout-menu-header-bg:         darken($header-bg, 25%) !default;
+$flyout-menu-header-bg:         shade($header-bg, 900) !default;
-$flyout-menu-header-border:     darken($header-bg, 25%) !default;
+$flyout-menu-header-border:     shade($header-bg, 900) !default;
-$flyout-menu-header-text:       #fff !default;
+$flyout-menu-header-text:       $white !default;
 
 $quick-search-width:            200px !default;
-$quick-search-border:           darken($header-bg, 15%) !default;
+$quick-search-border:           shade($header-bg, 800) !default;
-$quick-search-border-focus:     lighten($header-bg, 25%) !default;
+$quick-search-border-focus:     shade($header-bg, 400) !default;
 $quick-search-box-width:        300px !default;
 $quick-search-dropdown-bg:      $body-bg !default;
-$quick-search-dropdown-border:  $gray-lighter !default;
+$quick-search-dropdown-border:  $gray-400 !default;
 
 $logo-image-width:              60px !default;
 $logo-image-height:             40px !default;
@@ -379,17 +502,17 @@ $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:                  $gray-100 !default;
-$main-menu-bg-hover:            $gray-lightest !default;
+$main-menu-bg-hover:            $gray-100 !default;
-$main-menu-link:                $gray-darker !default;
+$main-menu-link:                $gray-900 !default;
-$main-menu-link-active:         #000 !default;
+$main-menu-link-active:         $black !default;
-$main-menu-border:              $gray-lighter !default;
+$main-menu-border:              $gray-400 !default;
-$main-menu-shadow-hover:        $gray-light !default;
+$main-menu-shadow-hover:        $gray-600 !default;
 $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%);
+$main-menu-dropdown-bg:         $gray-50;
 
 
 //== Pagination
@@ -398,21 +521,21 @@ $main-menu-dropdown-bg:         lighten($main-menu-bg, 3%);
 $pagination-padding-vertical:   $btn-padding-vertical !default;
 $pagination-padding-horizontal: 10px !default;
 
-$pagination-color:              $link-color !default;
+$pagination-color:              $gray-900 !default;
-$pagination-bg:                 #fafafa !default;
+$pagination-bg:                 $gray-200 !default;
-$pagination-border:             #ddd !default;
+$pagination-border:             $gray-200 !default;
 
-$pagination-hover-color:        $link-hover-color !default;
+$pagination-hover-color:        $gray-900 !default;
-$pagination-hover-bg:           $gray-lightest !default;
+$pagination-hover-bg:           $gray-300 !default;
-$pagination-hover-border:       #bbb !default;
+$pagination-hover-border:       $gray-300 !default;
 
-$pagination-active-color:       #fff !default;
+$pagination-active-color:       $brand-text !default;
 $pagination-active-bg:          $brand-primary !default;
 $pagination-active-border:      $brand-primary !default;
 
-$pagination-inactive-color:     #ccc !default;
+$pagination-inactive-color:     $gray-500 !default;
-$pagination-inactive-bg:        #fff !default;
+$pagination-inactive-bg:        $gray-50 !default;
-$pagination-inactive-border:    #eee !default;
+$pagination-inactive-border:    $gray-100 !default;
 
 
 //== Tabs
@@ -420,8 +543,9 @@ $pagination-inactive-border:    #eee !default;
 
 $tab-padding-vertical:          5px !default;
 $tab-padding-horizontal:        8px !default;
-$tab-border:                    $gray-lighter !default;
+$tab-border:                    $gray-500 !default;
-$tab-hover-bg:                  $gray-lightest !default;
+$tab-hover-bg:                  $gray-100 !default;
+$tab-hover-text:                $gray-950 !default;
 $tab-hover-border:              $tab-hover-bg !default;
 $tab-active-bg:                 $body-bg !default;
 $tab-active-text:               $text-color !default;
@@ -435,40 +559,42 @@ $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-hover-bg:         $gray-200 !default;
+$sidebar-link-hover-text:       $gray-900 !default;
 $sidebar-link-active-bg:        $body-bg !default;
-$sidebar-link-active-border:    $gray-lighter !default;
+$sidebar-link-active-border:    $gray-400 !default;
-$sidebar-link-active-side:      $brand-danger !default;
+$sidebar-link-active-side:      $red !default;
-$sidebar-link-active-text:      $gray-darkest !default;
+$sidebar-link-active-text:      $gray-950 !default;
 
 
 //== Flash messages (alerts)
 //
 
-$flash-success-bg:              #5cb85c !default;
+$flash-success-bg:              shade($green, 400) !default;
-$flash-success-border:          darken($flash-success-bg, 5%) !default;
+$flash-success-border:          shade($green, 500) !default;
-$flash-success-text:            #fff !default;
+$flash-success-text:            $white !default;
-$flash-success-link:            #fff !default;
+$flash-success-link:            $white !default;
 
-$flash-warning-bg:              #fde3a7 !default;
+$flash-warning-bg:              shade($yellow, 200) !default;
-$flash-warning-border:          darken($flash-warning-bg, 15%) !default;
+$flash-warning-border:          shade($yellow, 300) !default;
-$flash-warning-text:            #b45e10 !default;
+$flash-warning-text:            shade($yellow, 800) !default;
-$flash-warning-link:            #a0540e !default;
+$flash-warning-link:            shade($yellow, 900) !default;
 
-$flash-error-bg:                #d9534f !default;
+$flash-error-bg:                $red !default;
-$flash-error-border:            darken($flash-error-bg, 5%) !default;
+$flash-error-border:            shade($red, 600) !default;
-$flash-error-text:              #fff !default;
+$flash-error-text:              $white !default;
-$flash-error-link:              #fff !default;
+$flash-error-link:              $white !default;
 
 
 //== Progress bars
 //
 
-$progress-bg:                   #fff !default;
+$progress-height:               12px !default;
+$progress-bg:                   rgba($gray-500, .5) !default;
 $progress-bar-bg:               $brand-primary !default;
-$progress-bar-success-bg:       lighten($brand-success, 10%) !default;
+$progress-bar-success-bg:       $brand-success !default;
-$progress-bar-danger-bg:        lighten($brand-danger, 10%) !default;
+$progress-bar-danger-bg:        $brand-danger !default;
-$progress-bar-info-bg:          lighten($brand-info, 20%) !default;
+$progress-bar-info-bg:          $brand-info !default;
 
 
 //== Panels
@@ -477,34 +603,34 @@ $progress-bar-info-bg:          lighten($brand-info, 20%) !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-color:                   $gray-900 !default;
-$panel-bg:                      #f9f9f9 !default;
+$panel-bg:                      $gray-50 !default;
-$panel-border:                  #ccc !default;
+$panel-border:                  $gray-400 !default;
 $panel-border-radius:           $border-radius-base !default;
-$panel-shadow:                  0 1px 2px rgba(#000, .1),
+$panel-shadow:                  0 1px 2px rgba($black, .07),
-                                0 3px 8px rgba(#000, .07) !default;
+                                0 3px 8px rgba($black, .04) !default;
 
 
 //== Tooltips
 //
 
-$tooltip-bg:                    #fff !default;
+$tooltip-bg:                    $white !default;
 $tooltip-border-width:          0 !default;
-$tooltip-border:                #ccc !default;
+$tooltip-border:                $gray-500 !default;
-$tooltip-text:                  $gray-dark !default;
+$tooltip-text:                  $gray-800 !default;
 $tooltip-link:                  $link-color !default;
 
 
 //== Issue
 //
 
-$issue-bg:                      #f9f9f9 !default;
+$issue-bg:                      $gray-50 !default;
-$issue-border:                  #ccc !default;
+$issue-border:                  $gray-500 !default;
 $issue-text:                    $text-color !default;
 
 $issue-padding:                 15px !default;
 $issue-gravatar-size:           50px !default;
-$issue-heading-size:            1.5 !default;
+$issue-heading-size:            1.75 !default;
 
 $issue-attribute-padding-v:     3px !default;
 $issue-attribute-padding-h:     5px !default;

src/sass/application.scss

@@ -14,6 +14,7 @@
 @import "components/tabs";
 @import "components/pagination";
 @import "components/content";
+@import "components/context-menu";
 @import "components/gravatar";
 @import "components/list";
 @import "components/simple-list";

src/sass/components/_admin.scss

@@ -50,8 +50,8 @@ table.memberships {
 
 table.permissions {
   td.role {
-    color: $gray;
+    color: $gray-700;
-    font-weight: normal;
+    font-weight: $font-weight-normal;
     text-align: center;
     vertical-align: bottom;
   }
@@ -78,7 +78,7 @@ table.transitions {
 
 table.fields_permissions {
   td.readonly {
-    background: $gray-light;
+    background: $gray-600;
   }
 
   td.required {

src/sass/components/_base.scss

@@ -57,16 +57,17 @@ textarea,
 
 h1 {
   margin: 0;
-  font-size: 2em;             // ~28px
+  font-size: 2em;
-  line-height: 30px;
+  font-weight: $font-weight-semi-bold;
+  line-height: $line-height-large * .825;
 }
 
 h2 {
   margin-top: 0;
   margin-bottom: $line-height-computed;
-  font-size: 1.43em;          // ~20px
+  font-size: 1.43em;
-  font-weight: 500;
+  font-weight: $font-weight-semi-bold;
-  line-height: $line-height-computed;
+  line-height: $line-height-large;
 
   img {
     vertical-align: middle;
@@ -76,15 +77,16 @@ h2 {
 h3 {
   margin-top: 0;
   margin-bottom: $line-height-computed;
-  font-size: 1.14em;          // ~16px
+  font-size: 1.14em;
-  font-weight: 500;
+  font-weight: $font-weight-semi-bold;
-  line-height: $line-height-computed;
+  line-height: $line-height-large;
 }
 
 h4 {
   margin-top: 0;
   font-size: 1em;
-  font-weight: 500;
+  font-weight: $font-weight-semi-bold;
+  line-height: $line-height-base;
 }
 
 p {
@@ -96,10 +98,18 @@ small {
 }
 
 table {
+  th {
+    font-weight: $font-weight-bold;
+  }
+
   th,
   td {
     padding: $table-condensed-cell-padding $table-cell-padding;
   }
+
+  p {
+    margin: 0;
+  }
 }
 
 ul,
@@ -148,11 +158,6 @@ hr {
   }
 }
 
-abbr[title] {
-  border-bottom: 1px dotted $abbr-border-color;
-  cursor: help;
-}
-
 blockquote {
   margin: 0 0 $line-height-computed;
   padding: floor($line-height-computed / 4) $padding-large-horizontal;

src/sass/components/_buttons.scss

@@ -9,12 +9,13 @@ 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,
+  transition: border-color $transition-time ease-in-out,
-              border-color ease-in-out .07s,
+              background-color $transition-time ease-in-out,
-              box-shadow ease-in-out .07s;
+              box-shadow $transition-time ease-in-out;
   border: 1px solid;
   font-weight: $btn-font-weight;
   text-align: center;
+  vertical-align: top;
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
@@ -22,14 +23,9 @@ button {
 
   &:hover,
   &:focus {
-    outline: 0;
     text-decoration: none;
   }
 
-  &:active {
-    outline: 0;
-  }
-
   &.disabled,
   &[disabled],
   fieldset[disabled] & {
@@ -45,17 +41,21 @@ button {
 
 form {
   input[type="submit"] {
-    margin-right: 5px;
+    margin-right: 2px;
 
     + input {
       @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
     }
 
     + a {
-      margin-right: 5px;
+      display: inline-block;
+      margin-right: 2px;
+      padding-top: $btn-padding-vertical + 1px;
+      padding-bottom: $btn-padding-vertical + 1px;
+      line-height: $line-height-base;
 
       + a {
-        margin-left: 5px;
+        margin-left: 2px;
       }
     }
   }
@@ -88,38 +88,56 @@ form[action*="repository/diff"] {
 //
 p.buttons,
 .other-formats > span,
-#wiki_add_attachment > p {
+#wiki_add_attachment > p,
-  > a {
+#content > .contextual,
+#content > .contextual > span:not(.drdn),
+#query_form > .contextual,
+#query_form_with_buttons > .contextual {
+  > a,
+  > span:not(.drdn) {
     display: inline-block;
+    margin-right: 1px;
+    margin-left: 1px;
     padding: $btn-padding-vertical $btn-padding-horizontal-small;
-    border: 1px solid $pagination-border;
+    transition: border-color $transition-time ease-in-out,
+                background-color $transition-time ease-in-out,
+                color $transition-time ease-in-out;
+    border: 1px solid;
     border-radius: $border-radius-base;
-    background-color: $pagination-bg;
+    font-size: $font-size-base;
-
-    &:hover,
-    &:focus {
-      border-color: $pagination-hover-border;
-      outline: 0;
-      background-color: $pagination-hover-bg;
-      text-decoration: none;
-    }
-
-    &:active {
-      outline: 0;
-      box-shadow: inset 0 3px 4px -2px rgba(#000, .1);
-    }
 
     &.icon {
       padding-left: 20px + $btn-padding-horizontal-small;
       background-position: $btn-padding-horizontal-small 50%;
     }
+  }
 
-    @if $use-font-awesome == false {
+  > a {
-      &.atom {
+    border-color: $pagination-border;
-        padding-left: 20px + $btn-padding-horizontal-small;
+    background-color: $pagination-bg;
-        background-position: $btn-padding-horizontal-small 50%;
+    color: $pagination-color;
-      }
+
+    &:first-child {
+      margin-left: 0;
     }
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &:hover,
+    &:focus {
+      border-color: $pagination-hover-border;
+      background-color: $pagination-hover-bg;
+      color: $pagination-hover-color;
+      text-decoration: none;
+    }
+  }
+
+  > span:not(.drdn) {
+    border-color: $pagination-inactive-border;
+    background-color: $pagination-inactive-bg;
+    color: $pagination-inactive-color;
   }
 }
 
@@ -139,10 +157,21 @@ p.buttons {
   margin: $line-height-computed 0 0;
   text-align: right;
 
-  .pagination + &,
+  > span {
-  #wiki_add_attachment + & {
+    margin-right: 1px;
-    margin-top: 0;
+    margin-left: 1px;
-    float: right;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  @media screen and (min-width: $redmine-responsive-min) {
+    .pagination + &,
+    #wiki_add_attachment + & {
+      margin-top: 0;
+      float: right;
+    }
   }
 }
 
@@ -193,14 +222,16 @@ p.buttons {
 
 a[data-expands],
 .toggle-multiselect {
-  @extend %image-toggle-plus;
+  display: inline-block;
   position: relative;
   top: 3px;
-  padding: 2px 8px;
+  padding: 10px;
   border: 1px solid;
   border-radius: $border-radius-base;
+  background-image: inline-svg("plus.svg", (path: (fill: $btn-default-icon-color)));
   background-repeat: no-repeat;
   background-position: 2px 2px;
+  font-size: 0;
   vertical-align: top;
   cursor: pointer;
   user-select: none;
@@ -208,9 +239,7 @@ a[data-expands],
 }
 
 a[data-expands] {
-  display: inline-block;
   margin-right: 10px;
-  padding: 10px;
 
   > .toggle-multiselect {
     padding: 0;

src/sass/components/_calendar.scss

@@ -11,7 +11,7 @@ table.cal {
   thead th {
     width: 14%;
     padding: $table-condensed-cell-padding;
-    background-color: $table-bg-hover;
+    background-color: $table-bg-active;
 
     &.week-number {
       width: auto;
@@ -30,7 +30,7 @@ table.cal {
 
     &.week-number {
       border: 0 none;
-      background-color: $table-bg-hover;
+      background-color: $table-bg-active;
       font-size: 1em;
       text-align: right;
     }
@@ -42,7 +42,7 @@ table.cal {
     }
 
     &.odd p.day-num {
-      color: $gray-light;
+      color: $gray-600;
     }
 
     &.today {
@@ -59,22 +59,30 @@ table.cal .starting a,
 p.cal.legend .starting,
 table.cal .ending a,
 p.cal.legend .ending {
-  padding-left: 20px;
+  @extend %fa-icon;
-  background-image: url("../../../images/bullet_go.png");
+
-  background-repeat: no-repeat;
+  &::before {
-  background-position: 0 center;
+    content: $fa-var-caret-right;
+    width: 10px;
+    text-align: right;
+  }
 }
 
 table.cal .ending a,
 p.cal.legend .ending {
-  padding-left: 20px;
+  &::before {
-  background-image: url("../../../images/bullet_end.png");
+    content: $fa-var-caret-left;
+    text-align: left;
+  }
 }
 
 table.cal .starting.ending a,
 p.cal.legend .starting.ending {
-  padding-left: 20px;
+  &::before {
-  background-image: url("../../../images/bullet_diamond.png");
+    content: $fa-var-square;
+    transform: scale(.6) rotate(45deg);
+    text-align: center;
+  }
 }
 
 p.cal.legend {

src/sass/components/_content.scss

@@ -1,5 +1,18 @@
 #main {
-  @if $flexbox-layout {
+  @if $css-grid-layout {
+    display: grid;
+    grid-template-rows: auto 1fr;
+
+    @if $sidebar-position == "left" {
+      grid-template-areas:  "sidebar content"
+                            "footer footer";
+      grid-template-columns: auto 1fr;
+    } @else {
+      grid-template-areas:  "content sidebar"
+                            "footer footer";
+      grid-template-columns: 1fr auto;
+    }
+  } @else if $flexbox-layout {
     display: flex;
   } @else {
     @extend %clearfix;
@@ -14,7 +27,9 @@
 #content {
   padding: $padding-side;
 
-  @if $flexbox-layout {
+  @if $css-grid-layout {
+    grid-area: content;
+  } @else if $flexbox-layout {
     $side-space: $sidebar-width + $padding-side * 2;
     flex: 1 1 auto;
     width: calc(100% - #{$side-space});
@@ -38,7 +53,9 @@
     padding: 0;
     border: 0 none;
 
-    @if $flexbox-layout {
+    @if $css-grid-layout {
+      width: 0;
+    } @else if $flexbox-layout {
       flex: 0 0 auto;
     } @else {
       width: 0;
@@ -46,7 +63,10 @@
     }
   }
 
-  @if $flexbox-layout {
+  @if $css-grid-layout {
+    grid-area: sidebar;
+    width: $sidebar-width-computed;
+  } @else if $flexbox-layout {
     flex: 0 0 $sidebar-width-computed;
 
     @if $sidebar-position == "left" {
@@ -79,7 +99,7 @@
 
   > h3:first-child,
   > form:first-child > h3 {
-    margin-top: 0;
+    margin-top: $line-height-computed * .25;
   }
 
   ul {
@@ -107,12 +127,14 @@
             border-left-width: 3px;
             border-radius: $border-radius-large 0 0 $border-radius-large;
           } @else {
+            margin-left: -($sidebar-padding-horizontal);
             border-right-width: 3px;
             border-radius: 0 $border-radius-large $border-radius-large 0;
           }
 
           &:hover {
             background-color: $sidebar-link-hover-bg;
+            color: $sidebar-link-hover-text;
             text-decoration: none;
           }
 
@@ -127,7 +149,7 @@
               border-left-color: $sidebar-link-active-side;
               box-shadow: -3px 1px 2px rgba(0, 0, 0, .1);
             } @else {
-              margin-left: -1px;
+              margin-left: -($sidebar-padding-horizontal + 1px);
               border-right-color: $sidebar-link-active-side;
               border-left-color: $body-bg;
               box-shadow: 3px 1px 2px rgba(0, 0, 0, .1);
@@ -154,9 +176,13 @@
 #footer {
   margin: 0 $padding-side $line-height-computed;
   padding-top: $line-height-computed;
-  border-top: 1px solid $gray-lighter;
+  border-top: 1px solid $gray-400;
-  color: $gray-light;
+  color: $gray-600;
   font-size: $font-size-small;
+
+  @if $css-grid-layout {
+    grid-area: footer;
+  }
 }
 
 @if $fixed-layout {

src/sass/components/_context-menu.scss

@@ -0,0 +1,61 @@
+#wrapper {
+  .context-menu-selection {
+    &,
+    > td {
+      background-color: $brand-primary !important; // scss-lint:disable ImportantRule
+      color: $brand-text !important; // scss-lint:disable ImportantRule
+    }
+  }
+
+  #context-menu {
+    > ul,
+    > ul > li > ul {
+      @include nice-shadow(2);
+      border: 0 none !important; // scss-lint:disable ImportantRule
+    }
+
+    ul {
+      padding: 3px;
+    }
+
+    li {
+      padding: 0;
+      border: 0 none;
+      border-radius: $border-radius-small;
+      background: transparent;
+
+      &:hover {
+        background-color: $pagination-hover-bg;
+      }
+    }
+
+    a {
+      @extend %fa-icon;
+      padding: 3px 10px 3px 20px;
+      border-radius: $border-radius-small;
+
+      &::before {
+        margin-top: 2px;
+        margin-left: -16px;
+        float: left;
+      }
+
+      &:hover {
+        border-color: $pagination-hover-border;
+        background-color: $pagination-hover-bg;
+      }
+
+      &.disabled {
+        color: rgba($pagination-color, .5);
+      }
+
+      &.icon-checked {
+        background: transparent;
+      }
+
+      &.submenu {
+        background-image: inline-svg("chevron-right.svg", (path: (fill: $btn-default-icon-color)));
+      }
+    }
+  }
+}

src/sass/components/_dropdown.scss

@@ -31,7 +31,7 @@
   &-items {
     max-height: 400px;
     overflow: auto;
-    color: $gray-light;
+    color: $gray-600;
 
     &:empty {
       border: 0;
@@ -40,31 +40,24 @@
     &.selection {
       > a,
       > span {
+        @extend %fa-icon;
+
         &::before {
           content: " ";
           display: inline-block;
           width: 1em;
           font-weight: $font-weight-bold;
         }
-
-        @if $use-font-awesome {
-          @extend %fa-icon;
-        }
       }
 
       > .selected::before {
-        @if $use-font-awesome {
+        content: $fa-var-check;
-          content: $fa-var-check;
-        } @else {
-          content: "\2713 ";
-        }
       }
     }
 
     > a,
     > span {
       display: block;
-      margin: 0;
       padding: $btn-padding-vertical $btn-padding-horizontal-small;
 
       &.icon {
@@ -83,10 +76,33 @@
 
 .contextual {
   .drdn {
+    &.expanded {
+      > .drdn-trigger {
+        border-color: $pagination-active-border;
+        background-color: $pagination-active-bg;
+        color: $pagination-active-color;
+      }
+    }
+
     &-trigger {
+      padding: $btn-padding-vertical $btn-padding-horizontal-small;
+      border: 1px solid $pagination-border;
+      border-radius: $border-radius-base;
+      background-color: $pagination-bg;
+      box-shadow: none;
+      color: $pagination-color;
+      text-align: center;
+
       > .icon-only::before {
         margin: 0 1px;
       }
+
+      &:hover,
+      &:focus {
+        border-color: $pagination-hover-border;
+        background-color: $pagination-hover-bg;
+        color: $pagination-hover-color;
+      }
     }
 
     &-items {

src/sass/components/_elements.scss

@@ -91,20 +91,6 @@ a.collapsible.collapsed,
   select {
     font-size: .9em;
   }
-
-  a {
-    display: inline-block;
-    white-space: nowrap;
-  }
-
-  a,
-  .drdn {
-    margin-left: $padding-small-vertical;
-  }
-
-  > :first-child {
-    margin-left: 0;
-  }
 }
 
 
@@ -188,20 +174,6 @@ a.collapsible.collapsed,
 }
 
 
-//== Watchers selection list
-//
-
-#users_for_watcher {
-  height: 200px;
-  overflow: auto;
-
-  label {
-    @include check;
-    display: block;
-  }
-}
-
-
 //== Watchers list
 //
 
@@ -229,13 +201,18 @@ a.collapsible.collapsed,
         background: transparent;
       }
 
+      > .icon-only {
+        &::before {
+          line-height: inherit;
+        }
+      }
+
       > .delete {
         float: right;
-        opacity: .5;
+        opacity: $icon-opacity;
-        vertical-align: middle;
 
         &:hover {
-          opacity: 1;
+          opacity: $icon-hover-opacity;
         }
       }
 
@@ -286,7 +263,7 @@ p.subtitle {
   margin: $padding-side / -2;
   margin-bottom: $line-height-computed;
   padding: $padding-side / 2;
-  outline: 2px dashed $gray-light;
+  outline: 2px dashed $gray-600;
 }
 
 .mypage-box {
@@ -298,10 +275,10 @@ p.subtitle {
 
   &.ui-sortable-handle {
     overflow: hidden;
-    outline: 1px solid $gray-lighter;
+    outline: 1px solid $gray-400;
 
     &:hover {
-      outline: 1px solid $gray-light;
+      outline: 1px solid $gray-600;
     }
   }
 
@@ -351,12 +328,12 @@ a.close-icon {
     margin: $padding-side / -2;
     margin-bottom: $line-height-computed;
     padding: $padding-side / 2;
-    outline: 2px dashed $gray-light;
+    outline: 2px dashed $gray-600;
   }
 
   .mypage-box {
     > .contextual {
-      transition: opacity .2s;
+      transition: opacity $transition-time;
       opacity: 0;
     }
 
@@ -405,7 +382,7 @@ a.close-icon {
   th.line-num {
     border-color: darken($body-bg, 10%);
     background-color: darken($body-bg, 5%);
-    color: $gray;
+    color: $gray-700;
   }
 
   th.line-num,
@@ -499,7 +476,7 @@ ul.projects {
   }
 
   ul.projects {
-    border-left: 2px solid $gray-lighter;
+    border-left: 2px solid $gray-400;
   }
 
   li.root {
@@ -515,7 +492,7 @@ ul.projects {
     font-weight: $font-weight-bold;
 
     &.child {
-      font-weight: normal;
+      font-weight: $font-weight-normal;
     }
   }
 }
@@ -549,11 +526,11 @@ ul.projects {
 
   tbody tr {
     &.subtotal {
-      color: $gray;
+      color: $gray-700;
       font-style: italic;
 
       td.hours {
-        color: $gray-light;
+        color: $gray-600;
       }
     }
 
@@ -596,12 +573,12 @@ div#roadmap {
 
   table.progress {
     td {
-      height: 16px;
+      height: $progress-height;
     }
 
     + .percent {
       position: relative;
-      top: 2px;
+      top: 0;
     }
   }
 
@@ -682,7 +659,7 @@ div#version-summary {
 
 tr.message {
   &.locked {
-    color: $gray;
+    color: $gray-700;
   }
 
   &.sticky td.subject {
@@ -736,20 +713,20 @@ div.table-list.boards {
   }
 
   .message {
-    border: 1px solid $gray-lighter;
+    border: 1px solid $gray-400;
     border-radius: $panel-border-radius;
-    background: $gray-lightest;
+    background: $gray-100;
 
     > h4,
     > p {
       margin-bottom: 0;
       padding: $bubble-padding-vertical $bubble-padding-horizontal;
-      border-bottom: 1px solid mix($gray-lighter, $gray-lightest, 50%);
+      border-bottom: 1px solid mix($gray-400, $gray-100, 50%);
-      color: $gray;
+      color: $gray-700;
       font-size: $font-size-list;
 
       a {
-        color: $gray-darker;
+        color: $gray-900;
 
         &.user {
           font-weight: $font-weight-bold;
@@ -766,14 +743,9 @@ div.table-list.boards {
     .contextual {
       position: relative;
       z-index: 1;
+      margin-top: $padding-small-vertical;
       margin-right: $bubble-padding-vertical;
 
-      @if $use-font-awesome {
-        margin-top: $padding-small-vertical;
-      } @else {
-        margin-top: $bubble-padding-vertical;
-      }
-
       a {
         margin-left: ceil($bubble-padding-vertical / 2);
       }
@@ -882,8 +854,7 @@ div.table-list.boards {
 
   header {
     h3 {
-      margin-bottom: .3em;
+      margin-bottom: $line-height-computed / 2;
-      line-height: 1.2;
 
       > a {
         font-weight: $font-weight-bold;
@@ -893,7 +864,7 @@ div.table-list.boards {
 }
 
 .author {
-  color: $gray;
+  color: $gray-700;
 
   .user {
     font-weight: $font-weight-bold;
@@ -930,6 +901,7 @@ div.table-list.boards {
   border-radius: $panel-border-radius;
   background: $body-bg;
   color: $panel-color;
+  font-family: $font-family-monospace;
 }
 
 .diff_out {
@@ -970,18 +942,12 @@ div.table-list.boards {
 
   li > a {
     margin-left: .5em;
-
-    @if $use-font-awesome == false {
-      img {
-        vertical-align: middle;
-      }
-    }
   }
 }
 
 ul.properties {
   padding: 0;
-  color: $gray;
+  color: $gray-700;
   font-size: $font-size-small;
 
   li {
@@ -1026,47 +992,58 @@ tr.changeset {
   font-size: 1em;
 
   .change {
-    background-position: 5px center;
+    margin-left: 8px;
   }
-
-  .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;
+    margin-top: $table-condensed-cell-padding;
-    color: $gray-dark;
+    color: $gray-800;
+  }
+}
 
-    a {
+#changes-legend > li.change,
-      @include link-variant($gray-dark);
+.changeset-changes ul > li.change {
+  padding-left: 18px;
+  background: transparent;
+  background-repeat: no-repeat;
+  background-position: 0 center;
+
+  &.folder {
+    @extend %fa-icon;
+
+    &::before {
+      content: $fa-var-folder;
+      top: 0;
+      margin-right: 0;
+      margin-left: -18px;
+      font-size: 1em;
+    }
+
+    &.change-A::before,
+    &.change-M::before {
+      content: $fa-var-folder-open;
     }
   }
 
-  .change-A {
+  &.change-A {
-    &::before { color: $changeset-add-color; }
+    background-image: inline-svg("diff-added.svg", (path: (fill: $changeset-added-color)));
-    a { @include link-variant($changeset-add-color); }
   }
 
-  .change-M {
+  &.change-M {
-    &::before { color: $changeset-modified-color; }
+    background-image: inline-svg("diff-modified.svg", (path: (fill: $changeset-modified-color)));
-    a { @include link-variant($changeset-modified-color); }
   }
 
-  .change-C {
+  &.change-C {
-    &::before { color: $changeset-copied-color; }
+    background-image: inline-svg("diff-copied.svg", (path: (fill: $changeset-copied-color)));
-    a { @include link-variant($changeset-copied-color); }
   }
 
-  .change-R {
+  &.change-R {
-    &::before { color: $changeset-renamed-color; }
+    background-image: inline-svg("diff-renamed.svg", (path: (fill: $changeset-renamed-color)));
-    a { @include link-variant($changeset-renamed-color); }
   }
 
-  .change-D {
+  &.change-D {
-    color: $changeset-deleted-color;
+    background-image: inline-svg("diff-deleted.svg", (path: (fill: $changeset-deleted-color)));
   }
 }

src/sass/components/_flash.scss

@@ -8,6 +8,7 @@
 .nodata,
 .warning,
 .conflict {
+  @extend %fa-icon;
   margin-bottom: $line-height-computed;
   padding: $padding-large-vertical $padding-large-horizontal;
   padding-left: $padding-large-horizontal + 8px + 16px;
@@ -16,14 +17,10 @@
   background-repeat: no-repeat;
   background-position: $padding-large-horizontal 50%;
 
-  @if $use-font-awesome {
+  &::before {
-    @extend %fa-icon;
+    margin-left: -(8px + 16px);
-
+    float: left;
-    &::before {
+    line-height: $line-height-computed;
-      margin-left: -(8px + 16px);
-      float: left;
-      line-height: $line-height-computed;
-    }
   }
 
   >:last-child {
@@ -36,20 +33,16 @@
   background-color: $background;
   border-color: $border;
 
-  @if $use-font-awesome {
+  @if $icon == "true" {
-    @if $icon == "true" {
+    $icon: $fa-var-check;
-      $icon: $fa-var-check;
+  } @elseif $icon == "warning" {
-    } @elseif $icon == "warning" {
+    $icon: $fa-var-warning;
-      $icon: $fa-var-warning;
+  } @elseif $icon == "exclamation" {
-    } @elseif $icon == "exclamation" {
+    $icon: $fa-var-exclamation-circle;
-      $icon: $fa-var-exclamation-circle;
+  }
-    }
 
-    &::before {
+  &::before {
-      content: $icon;
+    content: $icon;
-    }
-  } @else {
-    background-image: url(../../../images/#{$icon}.png);
   }
 
   a {
@@ -83,11 +76,9 @@
     }
   }
 
-  @if $use-font-awesome {
+  &::before {
-    &::before {
+    margin-left: 0;
-      margin-left: 0;
+    float: none;
-      float: none;
-    }
   }
 }
 

src/sass/components/_forms.scss

@@ -7,8 +7,33 @@ form {
     padding: $table-condensed-cell-padding;
   }
 
+  label {
+    line-height: $input-height-base;
+    vertical-align: top;
+
+    > input[type="checkbox"],
+    > input[type="radio"] {
+      margin-top: $check-input-margin-btn-v;
+    }
+  }
+
+  .box label {
+    line-height: $line-height-base;
+
+    > input[type="checkbox"],
+    > input[type="radio"] {
+      margin-top: $check-input-margin-vertical;
+    }
+  }
+
   .contextual > & {
     display: inline-block;
+    line-height: $input-height-base;
+    vertical-align: top;
+
+    label {
+      line-height: inherit;
+    }
   }
 }
 
@@ -51,7 +76,9 @@ input[type="password"] {
   @extend %form-field;
   @include form-control-focus;
   @include placeholder;
-  transition: border-color ease-in-out .1s, box-shadow ease-in-out .1s;
+  transition: border-color $transition-time ease-in-out,
+              box-shadow $transition-time ease-in-out;
+  vertical-align: top;
 
   &[disabled],
   &[readonly],
@@ -79,9 +106,10 @@ input[type="search"] {
 
 input[type="radio"],
 input[type="checkbox"] {
-  margin: 4px 5px 0 0;
+  margin: 4px 1px 0 0;
   margin-top: 1px \9; // IE8-9
   line-height: normal;
+  vertical-align: top;
 }
 
 input[type="file"] {
@@ -115,6 +143,7 @@ select {
   &[multiple],
   &[size] {
     height: auto;
+    min-height: $input-height-base;
   }
 
   &[size="1"] {
@@ -122,7 +151,7 @@ select {
   }
 
   option[disabled] {
-    color: $gray-lighter;
+    color: $gray-400;
   }
 
   &.expandable {
@@ -150,7 +179,7 @@ select {
     option,
     optgroup::before {
       padding: $input-padding-vertical $input-padding-horizontal;
-      border-bottom: 1px dotted $gray-lighter;
+      border-bottom: 1px dotted $gray-400;
     }
 
     optgroup > option {
@@ -170,7 +199,7 @@ select {
   // For some reason nested selectors will not work
   select[multiple] option {
     padding: $input-padding-vertical $input-padding-horizontal;
-    border-bottom: 1px dotted $gray-lighter;
+    border-bottom: 1px dotted $gray-400;
   }
 }
 
@@ -204,9 +233,9 @@ span.required {
   position: relative;
   top: 3px;
   margin-left: -.2em;
-  color: #d00;
+  color: $red;
   font-size: 1.5em;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
   line-height: 0;
 }
 
@@ -217,7 +246,7 @@ span.required {
 em.info {
   display: block;
   padding: 2px 0;
-  color: $gray;
+  color: $gray-700;
   font-size: $font-size-small;
   font-style: normal;
 }
@@ -253,10 +282,17 @@ em.info {
     margin: 0 0 ($line-height-computed / 2);
     padding-left: $label-width + $label-space;
     clear: left;
+    line-height: $input-height-base;
 
     .jstEditor {
       margin-bottom: 0;
     }
+
+    .bool_cf:not(.check_box_group) {
+      display: block;
+      padding-top: $input-padding-vertical + 1px;
+      line-height: $line-height-base;
+    }
   }
 
   input,
@@ -270,23 +306,17 @@ em.info {
     resize: vertical;
   }
 
-  input[type="radio"],
-  input[type="checkbox"] {
-    position: relative;
-    top: 3px;
-    vertical-align: baseline;
-  }
-
   span[title] {
-    border-bottom: 1px dotted #aaa;
+    border-bottom: 1px dotted $gray-600;
   }
 
   label {
     width: $label-width;
-    margin-top: $input-padding-vertical + 1px;
     margin-bottom: $input-padding-vertical + 1px;
     margin-left: -($label-width + $label-space);
+    padding-top: $input-padding-vertical + 1px;
     float: left;
+    line-height: $line-height-base;
     text-align: right;
     user-select: none;
 
@@ -301,7 +331,7 @@ em.info {
       display: block;
       width: auto;
       margin-left: 0;
-      padding-left: 16px;
+      padding-left: $check-input-gutter;
       float: none;
       text-align: left;
       cursor: pointer;
@@ -315,20 +345,23 @@ em.info {
       padding-left: 34px;
     }
 
-    > input[type="radio"],
+    > input[type="checkbox"],
-    > input[type="checkbox"] {
+    > input[type="radio"] {
-      top: 1px;
+      margin-top: $check-input-margin-vertical;
+    }
+
+    ~ input[type="checkbox"],
+    ~ input[type="radio"] {
+      margin-top: $check-input-margin-btn-v;
     }
   }
 }
 
 label.inline {
   display: inline-block;
-  margin-right: $padding-base-horizontal;
+  margin-right: $check-input-margin-horizontal;
-  padding-left: 16px;
+  padding-left: $check-input-gutter;
   float: none;
-  text-align: left;
-  cursor: pointer;
 
   &:last-child {
     margin-right: 0;
@@ -338,8 +371,7 @@ label.inline {
 label.inline,
 label.block {
   > input {
-    margin-top: .2em;
+    margin-left: -$check-input-gutter;
-    margin-left: -16px;
     float: left;
   }
 }
@@ -361,9 +393,7 @@ label[for=issue_description] + a {
 //== Hack: better looking filter checkbox in sidebar in projects list
 //
 
-label[for=closed] {
+label[for="closed"] {
-  @include check;
-  display: block;
   margin-bottom: $line-height-computed / 2;
 }
 
@@ -394,7 +424,7 @@ label[for=closed] {
   $input-height-large:             (ceil($font-size-large-px * $line-height-large) + ($input-padding-large-vertical * 2) + 2);
 
   label[for="issue_subject"] {
-    margin-top: floor($input-padding-large-vertical * $line-height-large + 1px);
+    padding-top: $input-padding-large-vertical;
   }
 
   #issue_subject {
@@ -534,30 +564,35 @@ label[for=closed] {
   float: right;
 
   input {
-    top: 2px;
+    margin-top: $check-input-margin-btn-v;
+    margin-right: 3px;
   }
 
   label {
+    display: inline-block !important; // scss-lint:disable ImportantRule
     margin-right: 0;
     padding-left: 0;
   }
 }
 
 
+#users_for_watcher,
 #watchers_inputs {
   display: block;
-  max-width: 64em;
   max-height: $check-list-max-height;
   margin-bottom: $line-height-computed / 2;
-  padding-top: $check-list-offset-top;
   overflow: auto;
-  columns: 18em 3;
 
-  label.floating {
+  label {
     @include check-list;
   }
 }
 
+#watchers_inputs {
+  max-width: 64em;
+  columns: 18em 3;
+}
+
 
 //== List of custom field values
 //
@@ -566,20 +601,21 @@ label[for=closed] {
   display: block;
   width: 90%;
   max-height: $check-list-max-height;
-  padding-top: $check-list-offset-top;
   overflow-y: auto;
 
   label {
     @include check-list;
   }
 
-  // Boolean field displayed as inline radio buttons
+  @media screen and (min-width: $redmine-responsive-min) {
-  &.bool_cf {
+    // Boolean field displayed as inline radio buttons
-    overflow: initial;
+    &.bool_cf {
+      overflow: initial;
 
-    label {
+      label {
-      display: inline-block;
+        display: inline-block;
-      margin-right: $check-input-margin-horizontal;
+        margin-right: $check-input-margin-horizontal;
+      }
     }
   }
 }
@@ -595,14 +631,14 @@ fieldset#filters {
     }
   }
 
-  .add-filter {
-    text-align: right;
-  }
-
   td {
     &.field {
-      min-width: 180px;
       padding-right: $table-cell-padding * 2;
+      white-space: nowrap;
+
+      @media screen and (min-width: $screen-sm-min) {
+        min-width: 180px;
+      }
     }
 
     &.operator {
@@ -625,13 +661,22 @@ fieldset#filters {
 
     &.add-filter {
       padding-top: $table-condensed-cell-padding * 2;
-      vertical-align: top;
+      text-align: right;
+    }
+
+    input[type="checkbox"],
+    input[type="radio"] {
+      margin-top: $check-input-margin-btn-v;
     }
   }
 
   div.add-filter {
     padding-top: $table-condensed-cell-padding;
-    float: right;
+
+    @media screen and (min-width: $redmine-responsive-min) {
+      float: right;
+      text-align: right;
+    }
   }
 }
 
@@ -640,6 +685,29 @@ fieldset#filters {
 }
 
 
+#activity_scope_form {
+  li {
+    > input[type="checkbox"],
+    > input[type="radio"] {
+      margin-top: $check-input-margin-btn-v;
+    }
+  }
+}
+
+
+#query_form {
+  p {
+    input,
+    select,
+    label,
+    .icon,
+    .icon-only {
+      vertical-align: middle;
+    }
+  }
+}
+
+
 //== Reset label style for trackers selector in custom field editor
 //
 
@@ -648,5 +716,6 @@ label.no-css {
   margin-left: 0;
   float: none;
   font-weight: inherit;
+  line-height: inherit;
   text-align: left;
 }

src/sass/components/_gantt.scss

@@ -7,12 +7,12 @@
   top: 0;
   height: 16px;
   overflow: hidden;
-  border: 1px solid $gray-lighter;
+  border: 1px solid $gray-400;
   border-left-width: 0;
   text-align: center;
 
   &.nwday {
-    background-color: $gray-lightest;
+    background-color: $gray-100;
   }
 }
 
@@ -137,17 +137,16 @@
   &:hover {
     z-index: 25;
 
-    .tip {
+    span.tip {
       display: block;
     }
   }
 
-  .tip {
+  span.tip {
     @include nice-shadow(3);
     display: none;
     position: absolute;
-    top: 9px;
+    top: 12px;
-    left: 24px;
     width: 270px;
     padding: $padding-base-vertical;
     border: $tooltip-border-width solid $tooltip-border;
@@ -158,9 +157,9 @@
   }
 
   @if $sidebar-position == "left" {
-    tr > td:last-child & {
+    .list & {
-      .tip {
+      span.tip {
-        right: 2px;
+        right: 0;
         left: auto;
       }
     }

src/sass/components/_image-base64.scss

@@ -6,39 +6,3 @@
 %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

@@ -3,13 +3,18 @@
 // --------------------------------------------------
 
 .issue {
+  @if not $clean-issues {
+    &.details {
+      padding: $issue-padding;
+      border: 1px solid $issue-border;
+      border-radius: $border-radius-base;
+      background-color: $issue-bg;
+      color: $issue-text;
+    }
+  }
+
   &.details {
     margin-bottom: $line-height-computed;
-    padding: $issue-padding;
-    border: 1px solid $issue-border;
-    border-radius: $border-radius-base;
-    background-color: $issue-bg;
-    color: $issue-text;
     word-wrap: break-word;
 
     @if $use-gravatars {
@@ -67,10 +72,10 @@
     > .subject {
       h3 {
         margin-bottom: .3em;
-        color: $gray-darkest;
+        color: $gray-950;
         font-size: $issue-heading-size * 1em;
         font-weight: $font-weight-bold;
-        line-height: 1.2;
+        line-height: 1.1;
       }
 
       p {
@@ -84,7 +89,11 @@
     }
 
     > hr {
-      margin: $issue-padding (-$issue-padding);
+      @if $clean-issues {
+        margin: $issue-padding 0;
+      } @else {
+        margin: $issue-padding (-$issue-padding);
+      }
       border-top-color: $issue-border;
     }
 
@@ -94,15 +103,26 @@
       }
 
       > .wiki {
-        margin: 0 (-$issue-padding) (-$issue-padding);
+        @if $clean-issues {
-        padding: $padding-wiki;
+          margin: 0 0 $issue-padding;
-        border-top: 1px solid $issue-border;
+        } @else {
-        background: $body-bg;
+          margin: 0 (-$issue-padding) (-$issue-padding);
+          padding: $padding-wiki;
+          border-top: 1px solid $issue-border;
+          background: $body-bg;
+        }
       }
     }
 
     .next-prev-links {
-      color: $gray-light;
+      margin: 0 0 $line-height-computed;
+      float: none;
+      color: $gray-600;
+
+      @media screen and (min-width: $screen-md-min) {
+        margin: 0;
+        float: right;
+      }
     }
   }
 
@@ -118,11 +138,12 @@
 
     > tbody > tr {
       th {
-        font-weight: normal;
+        color: $gray-700;
+        font-weight: $font-weight-normal;
       }
 
       td {
-        color: $gray-darkest;
+        color: $gray-950;
       }
     }
 
@@ -160,26 +181,29 @@
       margin-top: $issue-attribute-padding-v;
       padding: 1px $table-cell-padding;
       border-radius: $border-radius-base;
-      background-color: $brand-primary;
+      background-color: $status-default-bg;
-      color: $brand-text;
+      color: $status-default-color;
       font-size: $font-size-small;
       font-weight: $font-weight-bold;
       text-align: center;
       text-transform: uppercase;
     }
 
-    &.status-1 {
+    @each $status, $status-colors in $status-colors-map {
-      .attributes td.status,
+      &.#{$status} {
-      .attribute.status .value {
+        .attributes td.status,
-        background-color: $brand-info;
+        .attribute.status .value {
+          background-color: map-get($status-colors, background);
+          color: map-get($status-colors, color);
+        }
       }
     }
+  }
 
-    &.closed {
+  @if $priority-icon {
-      .attributes td.status,
+    .attributes td.priority,
-      .attribute.status .value {
+    .attribute.priority .value {
-        background-color: $brand-danger;
+      @include priority-icon-base;
-      }
     }
   }
 
@@ -200,6 +224,7 @@
     .label {
       width: 25%;
       float: left;
+      color: $gray-700;
 
       @media screen and (min-width: $screen-lg-min) {
         width: 14em;
@@ -207,7 +232,7 @@
     }
 
     .value {
-      color: $gray-darkest;
+      color: $gray-950;
 
       @media screen and (min-width: $screen-lg-min) {
         width: auto;
@@ -262,15 +287,15 @@ div.attachments {
   }
 
   .delete {
-    opacity: .5;
+    opacity: $icon-opacity;
 
     &:hover {
-      opacity: 1;
+      opacity: $icon-hover-opacity;
     }
   }
 
   span.author {
-    color: $gray;
+    color: $gray-700;
     font-size: $font-size-small;
   }
 }
@@ -285,12 +310,12 @@ div.thumbnails {
   a {
     display: inline-block;
     margin-right: 2px;
-    border: 1px solid $gray-lighter;
+    border: 1px solid $gray-400;
     border-radius: $border-radius-base;
     background-color: $body-bg;
 
     &:hover {
-      border-color: $gray-light;
+      border-color: $gray-600;
     }
   }
 
@@ -424,16 +449,20 @@ div.thumbnails {
     padding: $bubble-padding-vertical $bubble-padding-horizontal;
     font-size: $font-size-list;
 
-    > .journal-actions > a {
+    > .journal-actions {
-      opacity: .5;
+      padding-right: $issue-attribute-padding-h;
 
-      &:hover {
+      > a {
-        opacity: 1;
+        opacity: $icon-opacity;
+
+        &:hover {
+          opacity: $icon-hover-opacity;
+        }
       }
     }
 
     > a.journal-link {
-      color: $gray;
+      color: $gray-700;
 
       &::before {
         content: "";
@@ -446,11 +475,11 @@ div.thumbnails {
     padding: $bubble-padding-vertical $bubble-padding-horizontal;
     border-radius: $panel-border-radius $panel-border-radius 0 0;
     background-color: $issue-bg;
-    color: $gray;
+    color: $gray-700;
     font-size: $font-size-list;
 
     a {
-      color: $gray-darker;
+      color: $gray-900;
 
       &.user {
         font-weight: $font-weight-bold;
@@ -458,7 +487,7 @@ div.thumbnails {
     }
 
     .journal-link {
-      color: $gray;
+      color: $gray-700;
     }
   }
 
@@ -505,7 +534,7 @@ div.thumbnails {
   .details {
     margin: 0;
     padding: $bubble-padding-vertical 0;
-    padding-left: $bubble-padding-horizontal * 3;
+    padding-left: $bubble-padding-horizontal * 2.5;
     list-style: none;
     border-top: 1px solid mix($body-bg, $issue-border, 50%);
     font-size: $font-size-list;
@@ -523,11 +552,11 @@ div.thumbnails {
         display: block;
         position: absolute;
         top: 5px;
-        left: -($bubble-padding-horizontal * 1.5 + 6px / 2);
+        left: -($bubble-padding-horizontal + 6px / 2);
         width: 6px;
         height: 6px;
         border-radius: 50%;
-        background-color: $gray-light;
+        background-color: $gray-600;
       }
     }
 
@@ -548,15 +577,19 @@ div.thumbnails {
   .wiki,
   form {
     padding: $issue-padding;
-    border-top: 1px solid mix($body-bg, $issue-border, 50%);
+    border-top: 1px solid $issue-border;
   }
 
   form {
     padding-top: 5px;
-    background-color: $gray-lightest;
+    background-color: $gray-100;
 
     > p {
       margin-bottom: $issue-padding;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
 
     > .wiki {
@@ -651,7 +684,7 @@ span.private {
       @include clearfix;
       margin: 0;
       padding: $padding-base-vertical $padding-base-horizontal;
-      color: $gray;
+      color: $gray-700;
 
       > a {
         font-family: $font-family-monospace;
@@ -659,7 +692,7 @@ span.private {
       }
 
       .author a {
-        color: $gray-darker;
+        color: $gray-900;
 
         &.user {
           font-weight: $font-weight-bold;

src/sass/components/_jquery-ui.scss

@@ -282,7 +282,7 @@ img.ui-datepicker-trigger {
 
       &.ui-datepicker-week-col {
         padding-right: $table-condensed-cell-padding;
-        color: $gray-light;
+        color: $gray-600;
       }
     }
   }

src/sass/components/_jstoolbar.scss

@@ -6,35 +6,50 @@
 #content {
   div.jstTabs.tabs {
     height: auto;
+
     @if $flexbox-layout {
       @media screen and (max-width: $redmine-responsive-max) {
         clear: both;
       }
     }
 
-    ul {
+    > ul {
       width: 100%;
       height: auto;
 
-      li {
+      > li {
         height: auto;
         margin: 0;
 
+        > a {
+          &:hover,
+          &:focus {
+            border-color: darken($tab-hover-border, 3%) darken($tab-hover-border, 3%) $tab-border;
+            background-color: darken($tab-hover-bg, 3%);
+          }
+
+          &.selected {
+            border-color: $tab-active-border $tab-active-border $tab-active-bg;
+            background: $tab-active-bg;
+            color: $tab-active-text;
+
+            &.tab-preview {
+              border-bottom-color: $wiki-preview-bg;
+              background-color: $wiki-preview-bg;
+            }
+          }
+        }
+
+        @if $flexbox-layout {
+          align-self: flex-end;
+        }
+
         &::before {
           content: none;
         }
 
-        &:not(.tab-elements) {
-          @if $flexbox-layout {
-            align-self: flex-end;
-          }
-
-          .selected {
-            border-color: $input-border $input-border $tab-active-bg;
-          }
-        }
-
         &.tab-elements {
+          flex: 1;
           margin-left: 5px;
         }
       }
@@ -47,7 +62,7 @@
 
   .jstEditor {
     .wiki-preview {
-      padding: $input-padding-vertical $input-padding-horizontal;
+      padding: $panel-body-padding;
       border: 1px solid $input-border;
       border-radius: $input-border-radius;
       background-color: $wiki-preview-bg;
@@ -61,14 +76,12 @@
 
 div.jstElements {
   @extend %clearfix;
+  line-height: normal;
 
   .box & {
+    display: block;
     padding: 0;
 
-    button {
-      margin-right: 2px;
-    }
-
     .jstSpacer {
       margin-right: 4px;
     }
@@ -80,153 +93,149 @@ div.jstElements {
         float: right;
       }
     }
-
-    @media (min-width: $screen-lg) {
-      button {
-        margin-right: 4px;
-      }
-
-      .jstSpacer {
-        margin-right: 6px;
-      }
-    }
   }
 
   button {
-    margin-bottom: 5px;
+    margin-right: 2px;
+    margin-bottom: 4px;
     padding: 0;
-    background-color: $body-bg;
+    border: 0;
+    opacity: 1;
+    background-color: transparent;
     box-shadow: none;
-    color: $btn-default-color;
+    color: $gray-800;
     vertical-align: top;
 
     &::before {
       text-align: center;
     }
-  }
-}
 
-@if $use-font-awesome {
+    &:hover,
-  .jstElements {
+    &:focus {
-    %jstb-icon {
+      background-color: darken($tab-hover-bg, 3%);
-      @include fa-icon;
+      color: $gray-900;
-      background-image: none;
-    }
-
-    .jstb_strong {
-      @extend %jstb-icon;
-
-      &::before { content: $fa-var-bold; }
-    }
-
-    .jstb_em {
-      @extend %jstb-icon;
-
-      &::before { content: $fa-var-italic; }
-    }
-
-    .jstb_ins {
-      @extend %jstb-icon;
-
-      &::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 { content: $fa-var-header; font-size: .7857em; }
-    }
-
-    .jstb_h3 {
-      @extend %jstb-icon;
-
-      &::before { content: $fa-var-header; font-size: .6429em; }
-    }
-
-    .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 { content: $fa-var-question-circle; }
     }
   }
+
+  %jstb-icon {
+    @include fa-icon;
+    background: transparent;
+    background-image: none;
+  }
+
+  .jstb_strong {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-bold; }
+  }
+
+  .jstb_em {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-italic; }
+  }
+
+  .jstb_ins {
+    @extend %jstb-icon;
+
+    &::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 { content: $fa-var-header; font-size: .7857em; }
+  }
+
+  .jstb_h3 {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-header; font-size: .6429em; }
+  }
+
+  .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 { content: $fa-var-question-circle; }
+  }
 }

src/sass/components/_list.scss

@@ -2,6 +2,11 @@
 // Lists
 // --------------------------------------------------
 
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
 table.list {
   width: 100%;
   margin-bottom: $line-height-computed;
@@ -20,11 +25,12 @@ table.list {
     padding: $table-cell-padding;
     border: 2px solid $table-border-color;
     border-width: $table-list-header-border;
-    color: $gray;
+    background-color: $body-bg;
+    color: $gray-700;
     vertical-align: bottom;
 
     a {
-      color: $gray-darker;
+      color: $gray-900;
     }
   }
 
@@ -32,12 +38,6 @@ table.list {
     background-color: $highlight-bg;
   }
 
-  @if $table-list-highlight-rows {
-    > tbody > tr:hover {
-      background-color: $table-bg-hover;
-    }
-  }
-
   td {
     padding: $table-cell-padding;
     border: 1px solid $table-border-color;
@@ -45,10 +45,8 @@ table.list {
     text-align: center;
     vertical-align: top;
 
-    @if $use-font-awesome {
+    &.icon {
-      &.icon {
+      padding-left: $table-cell-padding + 20px;
-        padding-left: $table-cell-padding + 20px;
-      }
     }
 
     &.id,
@@ -60,7 +58,6 @@ table.list {
 
     &.id {
       font-weight: $font-weight-bold;
-      text-align: right;
     }
 
     &.reorder {
@@ -162,11 +159,11 @@ tr.project {
   &.archived,
   &.closed a,
   &.archived a {
-    color: #aaa;
+    color: $gray-600;
   }
 
   &.idnt td.name {
-    @extend %image-arrow-right;
+    background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-600)));
     background-repeat: no-repeat;
   }
 
@@ -210,7 +207,7 @@ tr.issue {
   }
 
   &.idnt td.subject {
-    @extend %image-arrow-right;
+    background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-600)));
     background-repeat: no-repeat;
   }
 
@@ -244,9 +241,9 @@ tr.issue {
 
 tr {
   span.expander {
-    @extend %image-toggle-plus;
     margin-left: 0;
     padding-left: 8px;
+    background-image: inline-svg("plus.svg", (path: (fill: $btn-default-icon-color)));
     background-repeat: no-repeat;
     background-position: center center;
     cursor: pointer;
@@ -254,7 +251,7 @@ tr {
   }
 
   &.open span.expander {
-    @extend %image-toggle-minus;
+    background-image: inline-svg("minus.svg", (path: (fill: $btn-default-icon-color)));
   }
 }
 
@@ -271,7 +268,7 @@ tr.builtin td.name {
 }
 
 tr.entry {
-  border: 1px solid $gray-lighter;
+  border: 1px solid $gray-400;
 
   td {
     white-space: nowrap;
@@ -311,14 +308,24 @@ tr.entry {
 @if $table-list-color-odd-rows {
   table.list:not(.odd-even) tbody tr:nth-child(odd),
   .odd {
-    background-color: $table-bg-accent;
+    > td {
+      background-color: $table-bg-accent;
+    }
   }
 }
 
 @if $table-list-color-even-rows {
   table.list:not(.odd-even) tbody tr:nth-child(even),
   .even {
-    background-color: $table-bg-accent;
+    > td {
+      background-color: $table-bg-accent;
+    }
+  }
+}
+
+@if $table-list-highlight-rows {
+  table.list > tbody > tr:nth-child(n):hover {
+    background-color: $table-bg-hover;
   }
 }
 
@@ -326,13 +333,20 @@ tr.entry {
 //== Priorities
 //
 
-@if $color-priorities {
+@if $priority-icon {
-  // scss-lint:disable SpaceAfterComma
+  table.list tbody tr {
-  @include priority(".priority-lowest",  $priority-lowest-bg,  $priority-lowest-text,  $priority-lowest-link);
+    .priority {
-  @include priority(".priority-default", $priority-default-bg, $priority-default-text, $priority-default-link);
+      @include priority-icon-base;
-  @include priority(".priority-high3",   $priority-high3-bg,   $priority-high3-text,   $priority-high3-link);
+    }
-  @include priority(".priority-high2",   $priority-high2-bg,   $priority-high2-text,   $priority-high2-link);
+  }
-  @include priority(".priority-highest", $priority-highest-bg, $priority-highest-text, $priority-highest-link);
+
+  @each $priority-id, $priority-icon in $priority-icons-map {
+    @include priority-icon(
+      ".priority-#{$priority-id}",
+      map-get($priority-icon, color),
+      map-get($priority-icon, icon)
+    );
+  }
 }
 
 @if $color-trackers {
@@ -359,7 +373,7 @@ tr.entry {
   a.issue {
     margin-right: 1px;
     padding: $tracker-inline-padding;
-    font-weight: normal;
+    font-weight: $font-weight-normal;
 
     &.closed {
       position: relative;
@@ -375,7 +389,7 @@ tr.entry {
         left: 5px;
         height: calc(50% - 2px/2);
         transform: rotate(-4deg);
-        transition: border-color .1s;
+        transition: border-color $transition-time;
         border-top: 2px solid rgba($tracker-default-text, .95);
       }
 
@@ -395,16 +409,6 @@ tr.entry {
     }
   }
 
-  @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}",
@@ -431,8 +435,8 @@ tr.group {
 
   .toggle-all {
     display: none;
-    color: $gray-light;
+    color: $gray-600;
-    font-weight: normal;
+    font-weight: $font-weight-normal;
   }
 
   &:hover .toggle-all {
@@ -507,7 +511,7 @@ tr.time-entry {
   }
 
   tr.time-entry td.hours {
-    font-weight: normal;
+    font-weight: $font-weight-normal;
   }
 }
 
@@ -526,10 +530,10 @@ tr.wiki-page-version {
 
 tr.version {
   &.closed {
-    color: $gray;
+    color: $gray-700;
 
     a {
-      color: $gray;
+      color: $gray-700;
     }
   }
 
@@ -568,7 +572,7 @@ tr.user {
   &.registered,
   &.locked a,
   &.registered a {
-    color: $gray-light;
+    color: $gray-600;
   }
 }
 

src/sass/components/_login.scss

@@ -15,6 +15,7 @@
     display: block;
     margin-bottom: $padding-base-vertical;
     font-weight: $font-weight-bold;
+    line-height: inherit;
 
     &[for="autologin"] {
       @include check;

src/sass/components/_plugins.scss

@@ -63,9 +63,10 @@
   }
 }
 
-@if $use-font-awesome {
+.contextual {
-  .icon.icon-heart,
+  .icon-heart,
-  .icon.icon-heart-off {
+  .icon-heart-off {
+    margin-left: $padding-small-vertical;
     background-image: none;
   }
 
@@ -90,61 +91,72 @@
   }
 }
 
+#content > .contextual {
+  > span.heart-link-with-count {
+    padding: 0;
+    border: 0;
+    background: transparent;
+
+    > a:first-child {
+      margin-right: 0;
+      margin-left: 4px;
+      padding-right: floor($btn-padding-horizontal-small / 2);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+
+      + a {
+        min-width: unset;
+        margin-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+}
+
 
 //
 // Redmine Time Tracker
 // https://github.com/fernandokosh/redmine_time_tracker
 // --------------------------------------------------
 
-@if $use-font-awesome {
+.tt_list_button {
-  .tt_list_button {
+  @extend %fa-icon;
-    @extend %fa-icon;
+  font-size: $fa-font-size-base;
-    font-size: $fa-font-size-base;
+}
+
+.icon,
+.tt_list_button {
+  &.icon-start,
+  &.icon-stop {
+    background-image: none;
   }
 
-  .icon,
+  &.icon-start {
-  .tt_list_button {
+    @include link-variant(success);
-    &.icon-start,
-    &.icon-stop {
-      background-image: none;
-    }
 
-    &.icon-start {
+    &::before {
-      color: $icon-success-color;
+      content: $fa-var-clock-o;
-
-      &:hover,
-      &:focus {
-        color: $icon-success-color;
-      }
-
-      &::before {
-        content: $fa-var-clock-o;
-      }
-    }
-
-    &.icon-stop {
-      color: $icon-danger-color;
-
-      &:hover,
-      &:focus {
-        color: $icon-danger-color;
-      }
-
-      &::before {
-        content: $fa-var-history;
-      }
     }
   }
 
-  .time-tracker-quick-menu:empty {
+  &.icon-stop {
-    display: none;
+    @include link-variant(danger);
-  }
 
-  #user-time-bookings-list {
+    &::before {
-    clear: both;
+      content: $fa-var-history;
+    }
   }
 }
 
+.time-tracker-quick-menu:empty {
+  display: none;
+}
+
+#user-time-bookings-list {
+  clear: both;
+}
+
 
 //
 // Redmine Agile
@@ -152,7 +164,11 @@
 // --------------------------------------------------
 
 .controller-agile_charts #main {
-  @if $flexbox-layout {
+  @if $css-grid-layout {
+    > div:not(#content):not(#sidebar) {
+      grid-area: footer;
+    }
+  } @else if $flexbox-layout {
     flex-wrap: wrap;
 
     > #footer {
@@ -206,8 +222,8 @@
     }
 
     .select2-selection {
-      transition: border-color 50ms ease-in-out,
+      transition: border-color $transition-time ease-in-out,
-                  box-shadow 50ms ease-in-out;
+                  box-shadow $transition-time ease-in-out;
       border-color: $input-border;
       box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
     }
@@ -222,6 +238,26 @@
 }
 
 
+//
+// Redmine Checklists
+// https://www.redmineup.com/pages/plugins/checklists
+// --------------------------------------------------
+
+#checklist_form_items {
+  .checklist-item {
+    display: block;
+    margin: 0;
+    padding-top: $check-list-offset-top;
+    line-height: initial;
+
+    &.new {
+      padding-top: $padding-base-vertical;
+      line-height: inherit;
+    }
+  }
+}
+
+
 //
 // Redmine custom menu
 // http://rmplus.pro/en/redmine/plugins/custom_menu
@@ -330,10 +366,8 @@
       }
     }
 
-    @if $use-font-awesome {
+    .icon {
-      .icon {
+      background-image: none;
-        background-image: none;
-      }
     }
   }
 
@@ -362,16 +396,10 @@
 
     .icon {
       padding-left: $table-condensed-cell-padding + 20px;
-      background-position: $table-condensed-cell-padding $table-condensed-cell-padding;
+      background-image: none;
-    }
 
-    @if $use-font-awesome {
+      > a {
-      .icon {
+        @extend %fa-icon;
-        background-image: none;
-
-        > a {
-          @extend %fa-icon;
-        }
       }
     }
 
@@ -492,11 +520,9 @@
       width: 80%;
       margin: 0;
 
-      @if $use-font-awesome {
+      a {
-        a {
+        img {
-          img {
+          display: none;
-            display: none;
-          }
         }
       }
     }
@@ -525,23 +551,15 @@
 
 div.wiking {
   &.flash {
-    @if $use-font-awesome {
+    &.warning,
-      &.warning,
+    &.notice,
-      &.notice,
+    &.tip {
-      &.tip {
+      background-image: none;
-        background-image: none;
+    }
-      }
 
-      &.tip {
+    &.tip {
-        &::before {
+      &::before {
-          content: $fa-var-lightbulb-o;
+        content: $fa-var-lightbulb-o;
-        }
-      }
-    } @else {
-      &.warning,
-      &.notice,
-      &.tip {
-        background-position: $padding-large-horizontal 50%;
       }
     }
   }

src/sass/components/_print.scss

@@ -25,7 +25,7 @@
   #main {
     display: block;
     overflow: visible !important; // scss-lint:disable ImportantRule
-    background: #fff;
+    background: $white;
   }
 
   #content {
@@ -34,7 +34,7 @@
     padding: 0;
     overflow: visible !important; // scss-lint:disable ImportantRule
     border: 0;
-    background: #fff;
+    background: $white;
   }
 
   .autoscroll {
@@ -45,7 +45,7 @@
     // scss-lint:disable ImportantRule
     padding: 0 !important;
     background-color: transparent !important;
-    color: #000 !important;
+    color: $black !important;
 
     &::before,
     &::after {
@@ -64,7 +64,7 @@
 
     th,
     td {
-      border: 1px solid #aaa;
+      border: 1px solid $gray-500;
       background-color: transparent;
 
       &.buttons {

src/sass/components/_progress.scss

@@ -4,11 +4,11 @@
 
 table.progress {
   width: 80px;
-  margin-top: 1px;
+  margin-top: 3px;
   margin-right: 5px;
   float: left;
   empty-cells: show;
-  border: 1px solid rgba(#000, .1);
+  border: 0 none;
 
   .version-overview & {
     width: 40em;
@@ -21,20 +21,30 @@ table.progress {
   }
 
   td {
-    height: 12px;
+    height: $progress-height;
     padding: 0;
     border: 0 none;
 
-    &.closed {
+    &:first-child {
-      background-color: $progress-bar-success-bg;
+      border-top-left-radius: $progress-height / 2;
+      border-bottom-left-radius: $progress-height / 2;
+    }
+
+    &:last-child {
+      border-top-right-radius: $progress-height / 2;
+      border-bottom-right-radius: $progress-height / 2;
     }
 
     &.done {
-      background-color: mix($progress-bar-success-bg, $progress-bg, 50%);
+      background-color: $progress-bar-bg !important; // scss-lint:disable ImportantRule
+    }
+
+    &.closed {
+      background-color: $progress-bar-success-bg !important; // scss-lint:disable ImportantRule
     }
 
     &.todo {
-      background-color: $progress-bg;
+      background-color: $progress-bg !important; // scss-lint:disable ImportantRule
     }
   }
 
@@ -53,7 +63,7 @@ p {
     margin-top: -4px;
     margin-bottom: 0;
     clear: left;
-    color: #777;
+    color: $gray-700;
     font-size: 80%;
   }
 }

src/sass/components/_responsive.scss

@@ -30,25 +30,37 @@
       #project-jump {
         padding: 0 $responsive-header-height 0 0;
 
+        &.expanded {
+          .drdn-trigger {
+            &::before {
+              padding: 0;
+              transform: rotate(180deg);
+            }
+          }
+        }
+
         .drdn-trigger {
           display: block;
           height: $responsive-header-height;
-          padding: 0 0 0 ($padding-base-horizontal + 30px);
+          padding: 0;
           background-color: transparent;
           box-shadow: none;
           line-height: $responsive-header-height;
 
           &::before {
-            padding-left: $padding-base-horizontal;
+            @include fa-icon;
-            font-size: 1.2em;
+            content: $fa-var-chevron-down;
-            font-weight: normal;
+            position: relative;
-            line-height: $responsive-header-height * .9;
+            top: -.1em;
+            width: $responsive-header-height * .75;
+            padding: 0;
+            transform: none;
+            font-size: .8em;
+            text-align: center;
           }
 
-          @if $use-font-awesome {
+          &::after {
-            &::after {
+            display: none;
-              display: none;
-            }
           }
         }
 
@@ -102,13 +114,11 @@
         a {
           background-position: 8px center;
 
-          @if $use-font-awesome {
+          &,
-            &,
+          &:hover,
-            &:hover,
+          &:focus {
-            &:focus {
+            &::before {
-              &::before {
+              color: $flyout-menu-link;
-                color: $flyout-menu-link;
-              }
             }
           }
 
@@ -116,10 +126,8 @@
             background-color: $body-bg;
             color: $text-color;
 
-            @if $use-font-awesome {
+            &::before {
-              &::before {
+              color: $text-color;
-                color: $text-color;
-              }
             }
           }
         }
@@ -175,43 +183,47 @@
     p.buttons,
     .other-formats > span,
     #wiki_add_attachment > p,
-    #content > .contextual {
+    #content > .contextual,
+    #content > .contextual > span,
+    #query_form > .contextual,
+    #query_form_with_buttons > .contextual {
       margin-bottom: $line-height-computed - $padding-small-horizontal;
       padding: 0;
       float: none;
       text-align: left;
 
       a {
-        display: inline-block;
+        padding: $btn-padding-vertical $btn-padding-horizontal-small;
-        margin: 0 $padding-small-vertical $padding-small-horizontal 0;
-        padding: ($btn-padding-vertical * 2) $btn-padding-horizontal;
         border: 1px solid $pagination-border;
         border-radius: $border-radius-base;
         background-color: $pagination-bg;
-        background-position: $btn-padding-horizontal center;
+        color: $pagination-color;
-        font-weight: $btn-font-weight;
+        font-weight: $font-weight-normal;
 
-        &:active,
         &:hover,
         &:focus {
           border-color: $pagination-hover-border;
           background-color: $pagination-hover-bg;
+          color: $pagination-hover-color;
           text-decoration: none;
         }
 
-        &:last-child {
-          margin-right: 0;
-        }
-
         &.icon {
-          padding-left: 20px + $btn-padding-horizontal;
+          padding-left: 20px + $btn-padding-horizontal-small;
+          background-position: $btn-padding-horizontal-small 50%;
         }
+      }
 
-        @if $use-font-awesome == false {
+      a,
-          &.atom {
+      input,
-            padding-left: 20px + $btn-padding-horizontal;
+      select,
-          }
+      label {
-        }
+        margin-top: 0;
+        margin-bottom: 5px;
+      }
+
+      label {
+        display: inline-block;
       }
     }
 
@@ -221,23 +233,11 @@
       border: 0;
 
       .drdn-trigger {
-        padding: ($btn-padding-vertical * 2) $btn-padding-horizontal;
+        padding: $btn-padding-vertical $btn-padding-horizontal;
-        border: 1px solid $pagination-border;
-        border-radius: $border-radius-base;
-        background-color: $pagination-bg;
-
-        &:active,
-        &:hover,
-        &:focus {
-          border-color: $pagination-hover-border;
-          background-color: $pagination-hover-bg;
-          text-decoration: none;
-        }
       }
 
       .drdn-items {
         a {
-          display: block;
           margin: 3px 0 0;
 
           &:first-child {

src/sass/components/_simple-list.scss

@@ -26,7 +26,7 @@
 
   span.description {
     display: block;
-    color: $gray;
+    color: $gray-700;
     font-style: italic;
   }
 }
@@ -44,9 +44,9 @@
   h4 {
     margin: 0 0 $line-height-computed;
     padding-bottom: .2em;
-    border-bottom: 1px dotted $gray-light;
+    border-bottom: 1px dotted $gray-600;
     font-size: $font-size-h4;
-    font-weight: normal;
+    font-weight: $font-weight-normal;
   }
 
   dt {
@@ -55,11 +55,11 @@
     }
 
     &.me .time {
-      border-bottom: 1px solid $gray-lighter;
+      border-bottom: 1px solid $gray-400;
     }
 
     .time {
-      color: $gray;
+      color: $gray-700;
     }
 
     @if $use-gravatars {
@@ -120,9 +120,21 @@
 // Search results highlight
 
 .highlight {
-  background-color: #fe8;
+  background-color: saturate(shade($yellow, 100), 25%);
+  color: saturate(shade($yellow, 800), 25%);
 
-  &.token-1 { background-color: #fba; }
+  &.token-1 {
-  &.token-2 { background-color: #afb; }
+    background-color: saturate(shade($red, 100), 25%);
-  &.token-3 { background-color: #aef; }
+    color: saturate(shade($red, 800), 25%);
+  }
+
+  &.token-2 {
+    background-color: saturate(shade($green, 100), 25%);
+    color: saturate(shade($green, 800), 25%);
+  }
+
+  &.token-3 {
+    background-color: saturate(shade($blue, 100), 25%);
+    color: saturate(shade($blue, 800), 25%);
+  }
 }

src/sass/components/_tabs.scss

@@ -65,10 +65,10 @@ $tabs-height: $line-height-computed + $tab-padding-vertical * 2 + 1px + 1px;
       margin: 0;
       padding: 0;
       float: left;
-      transition: opacity .1s;
+      transition: opacity $transition-time;
       border: 0 none;
       border-radius: 0;
-      opacity: .8;
+      opacity: $icon-opacity;
       background-color: $body-bg;
       background-repeat: no-repeat;
       background-position: center center;
@@ -76,7 +76,7 @@ $tabs-height: $line-height-computed + $tab-padding-vertical * 2 + 1px + 1px;
 
       &:hover,
       &:active {
-        opacity: 1;
+        opacity: $icon-hover-opacity;
       }
 
       &:active {
@@ -84,16 +84,16 @@ $tabs-height: $line-height-computed + $tab-padding-vertical * 2 + 1px + 1px;
       }
 
       &.disabled {
-        opacity: .4;
+        opacity: $icon-opacity / 2;
       }
     }
 
     .tab-left {
-      @extend %image-arrow-left;
+      background-image: inline-svg("chevron-left.svg", (path: (fill: $btn-default-icon-color)));
     }
 
     .tab-right {
-      @extend %image-arrow-right;
+      background-image: inline-svg("chevron-right.svg", (path: (fill: $btn-default-icon-color)));
     }
   }
 }
@@ -122,7 +122,7 @@ div.tabs:not(#main-menu) {
         &:focus {
           border-color: $tab-hover-border $tab-hover-border $tab-border;
           background-color: $tab-hover-bg;
-          color: $link-hover-color;
+          color: $tab-hover-text;
           text-decoration: none;
         }
 

src/sass/components/_top.scss

@@ -29,6 +29,7 @@
     }
 
     .top-menu-toggler {
+      @extend %fa-icon;
       display: block;
       position: absolute;
       top: $toggler-position-v;
@@ -37,46 +38,25 @@
       } @else {
         right: $toggler-position-h;
       }
+      color: mix($top-menu-link, $top-menu-bg, 33%);
+      font-size: $fa-font-size-base;
+      line-height: 1;
       user-select: none;
 
-      @if $use-font-awesome {
+      &::before {
-        @extend %fa-icon;
+        content: $fa-var-caret-square-o-down;
-        color: mix($top-menu-link, $top-menu-bg, 33%);
+        margin-right: 0;
-        font-size: $fa-font-size-base;
+      }
-        line-height: 1;
 
-        &::before {
+      &:hover,
-          content: $fa-var-caret-square-o-down;
+      &:focus,
-          margin-right: 0;
+      &:active {
-        }
+        color: mix($top-menu-link-hover, $top-menu-bg, 50%);
-
-        &:hover,
-        &:focus,
-        &:active {
-          color: mix($top-menu-link-hover, $top-menu-bg, 50%);
-        }
-      } @else {
-        @extend %image-arrow-down-white;
-        width: 15px;
-        height: 15px;
-        border-radius: $border-radius-base;
-        background-repeat: no-repeat;
-        background-position: center center;
-
-        &:hover,
-        &:focus,
-        &:active {
-          background-color: lighten($top-menu-bg, 15%);
-        }
       }
 
       &.expanded {
-        @if $use-font-awesome {
+        &::before {
-          &::before {
+          content: $fa-var-caret-square-o-up;
-            content: $fa-var-caret-square-o-up;
-          }
-        } @else {
-          @extend %image-arrow-up-white;
         }
       }
 
@@ -152,11 +132,11 @@
 
     .root {
       color: $header-root;
-      font-weight: 500;
+      font-weight: $font-weight-semi-bold;
     }
 
     .ancestor {
-      font-weight: 500;
+      font-weight: $font-weight-semi-bold;
     }
 
     .root,
@@ -182,6 +162,10 @@
     color: $header-text;
   }
 
+  > * {
+    vertical-align: top;
+  }
+
   form {
     display: inline-block;
 
@@ -204,7 +188,7 @@
     color: $input-color;
 
     &[disabled] {
-      color: $gray-lighter;
+      color: $gray-400;
     }
   }
 }
@@ -220,12 +204,8 @@
       border-color: $quick-search-dropdown-bg;
       background-color: $quick-search-dropdown-bg;
 
-      @if $use-font-awesome {
+      &::after {
-        &::after {
+        content: $fa-var-caret-up;
-          content: $fa-var-caret-up;
-        }
-      } @else {
-        @extend %image-arrow-up;
       }
     }
   }
@@ -233,22 +213,15 @@
   .drdn {
     &-trigger {
       @extend %form-field;
+      @extend %fa-icon-after;
       min-width: $quick-search-width;
       border-color: $quick-search-border;
 
-      @if $use-font-awesome {
+      &::after {
-        @extend %fa-icon-after;
+        content: $fa-var-caret-down;
-
+        position: absolute;
-        &::after {
+        top: ($font-size-base / 2);
-          content: $fa-var-caret-down;
+        right: $input-padding-horizontal;
-          position: absolute;
-          top: ($font-size-base / 2);
-          right: $input-padding-horizontal;
-        }
-      } @else {
-        @extend %image-arrow-down;
-        background-repeat: no-repeat;
-        background-position: right ($input-padding-horizontal / 2) center;
       }
     }
 
@@ -311,6 +284,7 @@
       > li {
         > a {
           height: $tabs-height;
+          margin: 0;
           border: 0 none;
           border-radius: 0;
           background: transparent;
@@ -328,7 +302,6 @@
 
     > li {
       position: relative;
-      margin-right: .5em;
       float: left;
 
       &:hover {
@@ -338,14 +311,14 @@
         }
 
         > .menu-children {
-          display: block;
+          visibility: visible;
         }
       }
 
       > a {
         display: block;
         padding: $main-menu-padding-vertical $main-menu-padding-horizontal;
-        transition: box-shadow .15s;
+        transition: box-shadow $transition-time-long;
         color: $main-menu-link;
         line-height: $line-height-computed;
         white-space: nowrap;
@@ -357,7 +330,6 @@
 
         &:hover,
         &:focus {
-          outline: 0 none;
           box-shadow: inset 0 (-$main-menu-shadow-width) 0 $main-menu-shadow-hover;
           text-decoration: none;
         }
@@ -367,20 +339,26 @@
           border-bottom: 3px solid $main-menu-shadow-active;
           box-shadow: none;
           color: $main-menu-link-active;
-          font-weight: $font-weight-bold;
+          font-weight: $font-weight-semi-bold;
         }
 
         &.new-object {
           position: relative;
-          min-width: 1.6em;
+          width: $tabs-height;
+          margin-right: $main-menu-padding-horizontal;
           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: 0;
-          font-size: 2em;
+
-          font-weight: bold;
+          &::before {
-          text-align: center;
+            @include fa-icon;
+            content: $fa-var-plus;
+            font-size: $fa-font-size-base;
+            line-height: $line-height-computed;
+            text-align: center;
+          }
 
           &:hover,
           &:focus {
@@ -397,7 +375,8 @@
 
   .menu-children {
     @include nice-shadow(2);
-    display: none;
+    display: block;
+    visibility: hidden;
     position: absolute;
     z-index: 1001;
     min-width: 130px;
@@ -405,11 +384,12 @@
     padding: 0;
     overflow: hidden;
     list-style: none;
+    transition: visibility 0ms 50ms;
     border-radius: 0 0 $border-radius-base $border-radius-base;
     background: $main-menu-dropdown-bg;
 
     &.visible {
-      display: block;
+      visibility: visible;
     }
 
     a {
@@ -420,7 +400,6 @@
 
       &:hover,
       &:focus {
-        outline: 0 none;
         background-color: $component-active-bg;
         color: $component-active-color;
         text-decoration: none;

src/sass/components/_wiki.scss

@@ -49,14 +49,14 @@ div.wiki {
 
   h1, .h1 {
     padding-bottom: .3em;
-    border-bottom: 1px solid $gray-lighter;
+    border-bottom: 1px solid $gray-400;
     font-size: $font-size-h1;
     line-height: 1.2;
   }
 
   h2, .h2 {
     padding-bottom: .3em;
-    border-bottom: 1px solid $gray-lighter;
+    border-bottom: 1px solid $gray-400;
     font-size: $font-size-h2;
     line-height: 1.225;
   }
@@ -75,12 +75,12 @@ div.wiki {
   }
 
   h6, .h6 {
-    color: $gray;
+    color: $gray-700;
     font-size: $font-size-h6;
   }
 
   .text-normal {
-    font-weight: normal;
+    font-weight: $font-weight-normal;
   }
 
   > a:first-child {
@@ -106,7 +106,7 @@ div.wiki {
         width: .7em;
         margin-left: -.7em;
         color: $headings-anchor-color-active;
-        font-weight: normal;
+        font-weight: $font-weight-normal;
       }
     }
   }
@@ -127,10 +127,10 @@ div.wiki {
 
   .contextual {
     a {
-      opacity: .5;
+      opacity: $icon-opacity;
 
       &:hover {
-        opacity: 1;
+        opacity: $icon-hover-opacity;
       }
     }
   }
@@ -195,7 +195,7 @@ div.wiki {
   code {
     padding: .2em .33em;
     border-radius: $border-radius-base;
-    background-color: rgba(#000, .04);
+    background-color: rgba($black, .04);
     font-size: $font-size-small;
   }
 
@@ -205,10 +205,9 @@ div.wiki {
     padding: 4px 8px;
     overflow-x: auto;
     overflow-y: hidden;
-    border: 1px solid #e7e7e7;
+    border: 1px solid rgba($black, .068);
     border-radius: $border-radius-base;
-    border-color: rgba(#000, .068);
+    background-color: rgba($black, .03);
-    background-color: rgba(#000, .03);
     font-size: $font-size-small;
 
     code {
@@ -242,7 +241,7 @@ div.wiki {
 
       a {
         color: $highlight-text;
-        font-weight: normal;
+        font-weight: $font-weight-normal;
         text-decoration: none;
 
         &:hover {
@@ -346,7 +345,7 @@ p.footnote {
     width: 300px;
     margin-top:  $line-height-computed;
     padding-top: $line-height-computed / 2;
-    border-top: 1px solid $gray-lighter;
+    border-top: 1px solid $gray-400;
   }
 
   + p.footnote::before {
@@ -357,18 +356,13 @@ p.footnote {
 .preview {
   margin-top: $line-height-computed;
   padding: $padding-wiki;
-  background-color: #fffbe5;
+  border: 1px solid $gray-400;
-  background-image: url("../images/draft.png");
+  background-color: $body-bg;
-  background-position: center center;
-
-  html[lang="pl"] & {
-    background-image: url("../images/draft-pl.png");
-  }
 }
 
 #wiki_add_attachment {
   padding-top: $line-height-computed;
-  border-top: 1px solid $gray-lighter;
+  border-top: 1px solid $gray-400;
 
   > p {
     margin-bottom: 0;
@@ -470,7 +464,7 @@ p.footnote {
 // Other helper classes
 // see: http://getbootstrap.com/css/#helper-classes
 
-.text-muted      { color: $gray-light; }
+.text-muted      { color: $gray-600; }
 .text-primary    { color: $brand-primary; }
 .text-success    { color: $brand-success; }
 .text-info       { color: $brand-info; }

src/sass/javascripts/_sidebar-toggler.scss

@@ -1,7 +1,4 @@
 @if $enable-sidebar-toggler {
-  $toggler-position-v:          1px;
-  $toggler-position-h:          1px;
-
   #main {
     position: relative;
   }
@@ -35,80 +32,51 @@
   .sidebar-toggler {
     display: block;
     position: absolute;
-    top: $toggler-position-v;
+    top: 1px;
+    width: 14px;
+    height: 16px;
+    border: 2px solid $gray-700;
+    border-radius: $border-radius-base;
+    background-color: $gray-200;
+    background-position: center;
+    line-height: 1;
     user-select: none;
 
     @media print {
       display: none;
     }
 
-    @if $use-font-awesome {
+    &:hover,
-      @extend %fa-icon;
+    &:focus,
-      color: $gray-light;
+    &:active {
-      line-height: 1;
+      background-color: $gray-300;
-
-      &::before {
-        margin-right: 0;
-      }
-
-      &:hover,
-      &:focus,
-      &:active {
-        color: $gray;
-      }
-    } @else {
-      width: 15px;
-      height: 15px;
-      border-radius: $border-radius-base;
-      background-repeat: no-repeat;
-      background-position: center center;
-
-      &:hover,
-      &:focus,
-      &:active {
-        background-color: $gray-lighter;
-      }
     }
 
     @if $sidebar-position == "left" {
-      left: $toggler-position-h;
+      left: 0;
+      background-image: inline-svg("chevron-left.svg", (path: (fill: $gray-700)));
 
-      @if $use-font-awesome {
+      @if not $fixed-layout {
-        &::before {
+        border-left: 0;
-          content: $fa-var-caret-square-o-left;
+        border-top-left-radius: 0;
-        }
+        border-bottom-left-radius: 0;
-      } @else {
-        @extend %image-arrow-left;
       }
     } @else {
-      right: $toggler-position-h;
+      right: 0;
+      background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-700)));
 
-      @if $use-font-awesome {
+      @if not $fixed-layout {
-        &::before {
+        border-right: 0;
-          content: $fa-var-caret-square-o-right;
+        border-top-right-radius: 0;
-        }
+        border-bottom-right-radius: 0;
-      } @else {
-        @extend %image-arrow-right;
       }
     }
 
     &.sidebar-hidden {
       @if $sidebar-position == "left" {
-        @if $use-font-awesome {
+        background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-700)));
-          &::before {
-            content: $fa-var-caret-square-o-right;
-          }
-        } @else {
-          @extend %image-arrow-right;
-        }
       } @else {
-        @if $use-font-awesome {
+        background-image: inline-svg("chevron-left.svg", (path: (fill: $gray-700)));
-          &::before {
-            content: $fa-var-caret-square-o-left;
-          }
-        } @else {
-          @extend %image-arrow-left;
-        }
       }
     }
   }

src/sass/lib/_normalize.scss

@@ -1,162 +1,116 @@
-/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
-//
+/* Document
-// 1. Set default font family to sans-serif.
+   ========================================================================== */
-// 2. Prevent iOS text size adjust after orientation change, without disabling
-//    user zoom.
-//
 
-html {
+/**
-  font-family: sans-serif; // 1
+ * 1. Correct the line height in all browsers.
-  -ms-text-size-adjust: 100%; // 2
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
-  -webkit-text-size-adjust: 100%; // 2
+ */
+
+ html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
-//
+/* Sections
-// Remove default margin.
+   ========================================================================== */
-//
+
+/**
+ * Remove the margin in all browsers.
+ */
 
 body {
   margin: 0;
 }
 
-// HTML5 display definitions
+/**
-// ==========================================================================
+ * Render the `main` element consistently in IE.
+ */
 
-//
+main {
-// Correct `block` display not defined for any HTML5 element in IE 8/9.
-// Correct `block` display not defined for `details` or `summary` in IE 10/11
-// and Firefox.
-// Correct `block` display not defined for `main` in IE 11.
-//
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
   display: block;
 }
 
-//
+/* Grouping content
-// 1. Correct `inline-block` display not defined in IE 8/9.
+   ========================================================================== */
-// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
-//
 
-audio,
+/**
-canvas,
+ * 1. Add the correct box sizing in Firefox.
-progress,
+ * 2. Show the overflow in Edge and IE.
-video {
+ */
-  display: inline-block; // 1
+
-  vertical-align: baseline; // 2
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
 }
 
-//
+/**
-// Prevent modern browsers from displaying `audio` without controls.
+ * 1. Correct the inheritance and scaling of font size in all browsers.
-// Remove excess height in iOS 5 devices.
+ * 2. Correct the odd `em` font sizing in all browsers.
-//
+ */
 
-audio:not([controls]) {
+pre {
-  display: none;
+  font-family: monospace, monospace; /* 1 */
-  height: 0;
+  font-size: 1em; /* 2 */
 }
 
-//
+/* Text-level semantics
-// Address `[hidden]` styling not present in IE 8/9/10.
+   ========================================================================== */
-// Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
-//
 
-[hidden],
+/**
-template {
+ * Remove the gray background on active links in IE 10.
-  display: none;
+ */
-}
-
-// Links
-// ==========================================================================
-
-//
-// Remove the gray background color from active links in IE 10.
-//
 
 a {
   background-color: transparent;
 }
 
-//
+/**
-// Improve readability when focused and also mouse hovered in all browsers.
+ * 1. Remove the bottom border in Chrome 57-
-//
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-
+ */
-a:active,
-a:hover {
-  outline: 0;
-}
-
-// Text-level semantics
-// ==========================================================================
-
-//
-// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
-//
 
 abbr[title] {
-  border-bottom: 1px dotted;
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
 }
 
-//
+/**
-// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ * Add the correct font weight in Chrome, Edge, and Safari.
-//
+ */
 
 b,
 strong {
   font-weight: $font-weight-bold;
 }
 
-//
+/**
-// Address styling not present in Safari and Chrome.
+ * 1. Correct the inheritance and scaling of font size in all browsers.
-//
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
 
-dfn {
+code,
-  font-style: italic;
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }
 
-//
+/**
-// Address variable `h1` font-size and margin within `section` and `article`
+ * Add the correct font size in all browsers.
-// contexts in Firefox 4+, Safari, and Chrome.
+ */
-//
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-//
-// Address styling not present in IE 8/9.
-//
-
-mark {
-  background: #ff0;
-  color: #000;
-}
-
-//
-// Address inconsistent and variable font size in all browsers.
-//
 
 small {
   font-size: 80%;
 }
 
-//
+/**
-// Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ * Prevent `sub` and `sup` elements from affecting the line height in
-//
+ * all browsers.
+ */
 
 sub,
 sup {
@@ -166,262 +120,220 @@ sup {
   vertical-align: baseline;
 }
 
-sup {
-  top: -0.5em;
-}
-
 sub {
   bottom: -0.25em;
 }
 
-// Embedded content
+sup {
-// ==========================================================================
+  top: -0.5em;
+}
 
-//
+/* Embedded content
-// Remove border when inside `a` element in IE 8/9/10.
+   ========================================================================== */
-//
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
 
 img {
-  border: 0;
+  border-style: none;
 }
 
-//
+/* Forms
-// Correct overflow not hidden in IE 9/10/11.
+   ========================================================================== */
-//
 
-svg:not(:root) {
+/**
-  overflow: hidden;
+ * 1. Change the font styles in all browsers.
-}
+ * 2. Remove the margin in Firefox and Safari.
-
+ */
-// Grouping content
-// ==========================================================================
-
-//
-// Address margin not present in IE 8/9 and Safari.
-//
-
-figure {
-  margin: 1em 40px;
-}
-
-//
-// Address differences between Firefox and other browsers.
-//
-
-hr {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-  height: 0;
-}
-
-//
-// Contain overflow in all browsers.
-//
-
-pre {
-  overflow: auto;
-}
-
-//
-// Address odd `em`-unit font size rendering in all browsers.
-//
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-// Forms
-// ==========================================================================
-
-//
-// Known limitation: by default, Chrome and Safari on OS X allow very limited
-// styling of `select`, unless a `border` property is set.
-//
-
-//
-// 1. Correct color not being inherited.
-//    Known issue: affects color of disabled elements.
-// 2. Correct font properties not being inherited.
-// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
-//
 
 button,
 input,
 optgroup,
 select,
 textarea {
-  color: inherit; // 1
+  font-family: inherit; /* 1 */
-  font: inherit; // 2
+  font-size: 100%; /* 1 */
-  margin: 0; // 3
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
 }
 
-//
+/**
-// Address `overflow` set to `hidden` in IE 8/9/10/11.
+ * Show the overflow in IE.
-//
+ * 1. Show the overflow in Edge.
+ */
 
-button {
+button,
+input { /* 1 */
   overflow: visible;
 }
 
-//
+/**
-// Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
-// All other form control elements do not inherit `text-transform` values.
+ * 1. Remove the inheritance of text transform in Firefox.
-// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ */
-// Correct `select` style inheritance in Firefox.
-//
 
 button,
-select {
+select { /* 1 */
   text-transform: none;
 }
 
-//
+/**
-// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ * Correct the inability to style clickable types in iOS and Safari.
-//    and `video` controls.
+ */
-// 2. Correct inability to style clickable `input` types in iOS.
-// 3. Improve usability and consistency of cursor style between image-type
-//    `input` and others.
-//
 
 button,
-html input[type="button"], // 1
+[type="button"],
-input[type="reset"],
+[type="reset"],
-input[type="submit"] {
+[type="submit"] {
-  -webkit-appearance: button; // 2
+  -webkit-appearance: button;
-  cursor: pointer; // 3
 }
 
-//
+/**
-// Re-set default cursor for disabled elements.
+ * Remove the inner border and padding in Firefox.
-//
+ */
-
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-
-//
-// Remove inner padding and border in Firefox 4+.
-//
 
 button::-moz-focus-inner,
-input::-moz-focus-inner {
+[type="button"]::-moz-focus-inner,
-  border: 0;
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
   padding: 0;
 }
 
-//
+/**
-// Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * Restore the focus styles unset by the previous rule.
-// the UA stylesheet.
+ */
-//
 
-input {
+button:-moz-focusring,
-  line-height: normal;
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
 }
 
-//
+/**
-// It's recommended that you don't attempt to style these elements.
+ * Correct the padding in Firefox.
-// Firefox's implementation doesn't respect box-sizing, padding, or width.
+ */
-//
-// 1. Address box sizing set to `content-box` in IE 8/9/10.
-// 2. Remove excess padding in IE 8/9/10.
-//
-
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box; // 1
-  padding: 0; // 2
-}
-
-//
-// Fix the cursor style for Chrome's increment/decrement buttons. For certain
-// `font-size` values of the `input`, it causes the cursor style of the
-// decrement button to change from `default` to `text`.
-//
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-//
-// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
-// 2. Address `box-sizing` set to `border-box` in Safari and Chrome
-//    (include `-moz` to future-proof).
-//
-
-input[type="search"] {
-  -webkit-appearance: textfield; // 1
-  -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box; // 2
-  box-sizing: content-box;
-}
-
-//
-// Remove inner padding and search cancel button in Safari and Chrome on OS X.
-// Safari (but not Chrome) clips the cancel button when the search input has
-// padding (and `textfield` appearance).
-//
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-//
-// Define consistent border, margin, and padding.
-//
 
 fieldset {
-  border: 1px solid #c0c0c0;
+  padding: 0.35em 0.75em 0.625em;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
 }
 
-//
+/**
-// 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 1. Correct the text wrapping in Edge and IE.
-// 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
-//
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
 
 legend {
-  border: 0; // 1
+  box-sizing: border-box; /* 1 */
-  padding: 0; // 2
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
 }
 
-//
+/**
-// Remove default vertical scrollbar in IE 8/9/10/11.
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
-//
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
 
 textarea {
   overflow: auto;
 }
 
-//
+/**
-// Don't inherit the `font-weight` (applied by a rule above).
+ * 1. Add the correct box sizing in IE 10.
-// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ * 2. Remove the padding in IE 10.
-//
+ */
 
-optgroup {
+[type="checkbox"],
-  font-weight: $font-weight-bold;
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
 }
 
-// Tables
+/**
-// ==========================================================================
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
 
-//
+[type="number"]::-webkit-inner-spin-button,
-// Remove most spacing between table cells.
+[type="number"]::-webkit-outer-spin-button {
-//
+  height: auto;
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
 }
 
-td,
+/**
-th {
+ * 1. Correct the odd appearance in Chrome and Safari.
-  padding: 0;
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
 }

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

@@ -796,3 +796,4 @@ $fa-var-yoast:                  "\f2b1";
 $fa-var-youtube:                "\f167";
 $fa-var-youtube-play:           "\f16a";
 $fa-var-youtube-square:         "\f166";
+

src/sass/mixins/_forms.scss

@@ -44,6 +44,7 @@
   @extend %clearfix;
   position: relative;
   padding-left: $check-input-gutter;
+  line-height: $line-height-base;
   text-align: left;
   font-weight: $font-weight-normal;
 
@@ -66,10 +67,12 @@
   @include check;
   display: block;
   width: auto;
-  margin: $btn-padding-vertical 0;
+  margin: 0;
+  padding-top: $check-list-offset-top;
+  padding-bottom: $check-list-offset-top;
   float: none;
 
   @media screen and (min-width: $screen-sm-min) {
-    margin: 0;
+    padding-bottom: 0;
   }
 }

src/sass/mixins/_issues.scss

@@ -1,146 +1,23 @@
-// Priority highlight
+// Priority icon
 
-@mixin priority($parent, $background, $color, $link) {
+@mixin priority-icon-base() {
-  @if lightness($background) < 85% {
+  &::before {
-    $background: lighten($background, 6%);
+    content: "\00a0";
+    display: inline-block;
+    width: $priority-icon-size;
+    margin-right: $priority-icon-space;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: $priority-icon-size;
   }
+}
 
-  $border-color: darken(desaturate($background, 30%), 13.5%);
+@mixin priority-icon($parent, $color, $icon) {
-
+  table.list tbody tr#{$parent} .priority,
-  table.list:not(.odd-even) tbody tr#{$parent} {
+  .issue.details#{$parent} .attributes td.priority,
-    @if $table-list-color-odd-rows {
+  .issue.details#{$parent} .attribute.priority .value {
-      &:nth-child(odd) {
+    &::before {
-        background: darken($background, $table-accent-factor * 100%);
+      background-image: inline-svg($icon, (path: (fill: $color)));
-      }
-    }
-
-    @if $table-list-color-even-rows {
-      &:nth-child(even) {
-        background: darken($background, $table-accent-factor * 100%);
-      }
-    }
-  }
-
-  tr#{$parent} {
-    background: $background;
-
-    @if ".priority-default" == $parent {
-      color: $color;
-    } @else {
-      color: darken($color, 10%);
-    }
-
-    @if $table-list-color-odd-rows {
-      &.odd {
-        background: darken($background, $table-accent-factor * 100%);
-      }
-    }
-
-    @if $table-list-color-even-rows {
-      &.even {
-        background: darken($background, $table-accent-factor * 100%);
-      }
-    }
-
-    td {
-      border-color: $border-color;
-    }
-
-    a {
-      color: $link;
-
-      &:hover {
-        color: darken($link, 10%);
-      }
-    }
-  }
-
-  @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;
-
-      @if ".priority-default" == $parent {
-        $border-color: $issue-border;
-        background: $issue-bg;
-      } @else {
-        background: $background;
-      }
-
-      &,
-      hr {
-        border-color: $border-color;
-      }
-
-      a {
-        color: $link;
-
-        &:hover {
-          color: darken($link, 10%);
-        }
-      }
-
-      .next-prev-links {
-        color: mix($color, $gray-light, 25%);
-      }
-
-      > .description > .wiki {
-        border-top-color: $border-color;
-      }
-
-      .wiki {
-        a {
-          color: $link-color;
-          text-decoration: none;
-
-          &:hover,
-          &:focus {
-            color: $link-hover-color;
-            text-decoration: $link-hover-decoration;
-          }
-
-          &.new {
-            color: $brand-danger;
-          }
-        }
-      }
-
-      > .attachments {
-        span.author {
-          color: mix($color, $gray, 25%);
-        }
-      }
-
-      > .description + .attachments {
-        border-top-color: lighten($border-color, 5%);
-
-        @if ".priority-default" == $parent {
-          background-color: lighten($issue-bg, 1.5%);
-        } @else {
-          background-color: lighten($background, 5%);
-        }
-      }
-
-      .list td {
-        border-bottom-color: $border-color;
-      }
     }
   }
 }
@@ -185,14 +62,4 @@
       color: mix($color, $background, 50%);
     }
   }
-
-  @if $colored-issue {
-    .issue.details a#{$parent},
-    .issue.details .wiki a#{$parent} {
-      &,
-      &:hover {
-        color: $color;
-      }
-    }
-  }
 }

src/sass/mixins/_link-variant.scss

@@ -1,10 +1,29 @@
 // Link variant
 
-@mixin link-variant($default-color, $hover-color: darken($default-color, 10%)) {
+@mixin link-variant($variant, $focus-hover: true) {
-  color: $default-color;
+  $colors: map-get($icon-color-map, $variant);
+
+  color: map-get($colors, normal);
+
+  @if $focus-hover {
+    &:focus,
+    &:hover {
+      color: map-get($colors, hover);
+    }
+  }
+}
+
+@mixin icon-variant($variant) {
+  $colors: map-get($icon-color-map, $variant);
+
+  &::before {
+    color: map-get($colors, normal);
+  }
 
   &:focus,
   &:hover {
-    color: $hover-color;
+    &::before {
+      color: map-get($colors, hover);
+    }
   }
 }

src/sass/mixins/_shadows.scss

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

src/sass/plugins/redmine_backlogs/global.scss

@@ -10,7 +10,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
-  background-color: mix($gray-lighter, $header-bg, 70%);
+  background-color: mix($gray-400, $header-bg, 70%);
   color: $text-color;
   font-family: $font-family-base;
   font-size: $font-size-base;
@@ -67,7 +67,8 @@ input.editor,
   @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;
+  transition: border-color $transition-time ease-in-out,
+              box-shadow $transition-time ease-in-out;
   border: 1px solid $input-border;
   border-radius: $input-border-radius;
   background-color: $input-bg;
@@ -90,7 +91,8 @@ button.ui-multiselect {
   height: $input-height-base;
   padding: $input-padding-vertical $input-padding-horizontal;
   overflow: hidden;
-  transition: border-color ease-in-out .1s, box-shadow ease-in-out .1s;
+  transition: border-color $transition-time ease-in-out,
+              box-shadow $transition-time ease-in-out;
   border: 1px solid $input-border;
   background: $input-bg;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
@@ -168,6 +170,10 @@ button.ui-multiselect {
   .links {
     float: right;
 
+    input {
+      vertical-align: initial;
+    }
+
     a {
       padding-left: 5px;
       cursor: pointer;
@@ -294,7 +300,7 @@ ul.ui-sortable {
 .rb-sortable-disabled,
 .ui-sortable-disabled {
   opacity: .5;
-  background-color: $gray-lighter;
+  background-color: $gray-400;
 }
 
 .w-rb-header-collapsed {

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

@@ -158,7 +158,7 @@
   background: $component-bg;
   box-shadow: none;
   color: $component-color;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
 }
 
 .ui-state-default a,
@@ -177,7 +177,7 @@
   border: 1px solid $component-active-border;
   background: $component-active-bg;
   color: $component-active-color;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
 
   .ui-icon {
     background-image: url("../images/ui-icons_ffffff_256x240.png");
@@ -202,7 +202,7 @@
   border: 1px solid $component-active-border;
   background: $component-active-bg;
   color: $component-active-color;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
 }
 
 .ui-state-active a,
@@ -222,24 +222,24 @@
 
 .ui-state-highlight,
 .ui-widget-content .ui-state-highlight {
-  border: 1px solid #fcefa1;
+  border: 1px solid shade($yellow, 600);
-  background: #fbf9ee;
+  background: shade($yellow, 200);
-  color: #363636;
+  color: shade($yellow, 800);
 
   a {
-    color: #363636;
+    color: shade($yellow, 800);
   }
 }
 
 
 .ui-state-error,
 .ui-widget-content .ui-state-error {
-  border: 1px solid #cd0a0a;
+  border: 1px solid $red;
-  background: #fef1ec;
+  background: shade($red, 50);
-  color: #cd0a0a;
+  color: $red;
 
   a {
-    color: #cd0a0a;
+    color: $red;
   }
 }
 
@@ -251,7 +251,7 @@
 .ui-priority-secondary,
 .ui-widget-content .ui-priority-secondary {
   opacity: .7;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
 }
 
 .ui-state-disabled,
@@ -521,7 +521,7 @@
 
 .ui-widget-overlay {
   opacity: .3;
-  background: #000;
+  background: $black;
 }
 
 .ui-widget-shadow {
@@ -529,7 +529,7 @@
   padding: 8px;
   border-radius: 8px;
   opacity: .3;
-  background: #aaa;
+  background: $gray-600;
 }
 
 /* Resizable
@@ -1083,7 +1083,7 @@ button.ui-button::-moz-focus-inner {
     background: $body-bg;
     box-shadow: none;
     color: $component-color;
-    font-weight: normal;
+    font-weight: $font-weight-normal;
 
     a,
     a:link,
@@ -1098,7 +1098,7 @@ button.ui-button::-moz-focus-inner {
     border: 1px solid $component-active-border;
     background: $component-active-bg;
     color: $component-active-color;
-    font-weight: normal;
+    font-weight: $font-weight-normal;
   }
 
   .ui-datepicker-prev,

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

@@ -71,10 +71,6 @@
     top: 0;
     margin: 3px 0 0 -20px;
     float: left;
-
-    &:focus {
-      outline: none;
-    }
   }
 
   label {

src/sass/plugins/redmine_backlogs/master_backlog.scss

@@ -160,7 +160,7 @@ $story-sp-input-width:          50px;
     position: relative;
     margin: 0 0 ($padding-side / 2);
     border-radius: $border-radius-large $border-radius-large 0 0;
-    background-color: $gray-lightest;
+    background-color: $gray-100;
 
     @media screen and (min-width: $screen-md-min) {
       margin: 0 0 $padding-side;
@@ -191,7 +191,7 @@ $story-sp-input-width:          50px;
         border-color: lighten($header-bg, 25%);
         box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2),
               0 0 0 1px lighten($header-bg, 25%);
-        color: $gray-darkest;
+        color: $gray-950;
       }
     }
 
@@ -341,7 +341,7 @@ $story-sp-input-width:          50px;
         box-shadow: 0 2px 1px rgba(#000, .1);
 
         a {
-          color: $gray-darker;
+          color: $gray-900;
         }
       }
 
@@ -434,7 +434,7 @@ $story-sp-input-width:          50px;
 
     .placeholder {
       min-height: ($line-height-computed + $table-condensed-cell-padding * 2);
-      background-color: $gray;
+      background-color: $gray-700;
     }
   }
 
@@ -442,14 +442,14 @@ $story-sp-input-width:          50px;
     display: block;
     margin: 0;
     padding: 0 $table-condensed-cell-padding;
-    border-top: 1px solid $gray-lighter;
+    border-top: 1px solid $gray-400;
     background-color: $body-bg;
     background-repeat: no-repeat;
     background-position: center;
     cursor: move;
 
     &:nth-child(2n) {
-      background-color: $gray-lightest;
+      background-color: $gray-100;
     }
 
     &:hover {
@@ -458,7 +458,7 @@ $story-sp-input-width:          50px;
 
     &.saving {
       background-image: url("images/ajax.gif");
-      color: $gray-light;
+      color: $gray-600;
     }
 
     &.error {
@@ -485,8 +485,8 @@ $story-sp-input-width:          50px;
             background-color: $tracker-default-bg;
             color: $tracker-default-text;
           } @else {
-            background-color: darken($gray-lightest, 3%);
+            background-color: darken($gray-100, 3%);
-            color: $gray-dark;
+            color: $gray-800;
           }
           font-weight: $font-weight-bold;
           text-align: right;
@@ -497,16 +497,16 @@ $story-sp-input-width:          50px;
             @if $color-trackers {
               color: mix($tracker-default-text, $tracker-default-bg, 50%);
             } @else {
-              color: $gray-light;
+              color: $gray-600;
             }
-            font-weight: normal;
+            font-weight: $font-weight-normal;
           }
 
           &:hover {
             @if $color-trackers {
               background-color: darken($tracker-default-bg, 10%);
             } @else {
-              background-color: $gray-lighter;
+              background-color: $gray-400;
             }
             text-decoration: none;
           }
@@ -594,7 +594,7 @@ $story-sp-input-width:          50px;
           border-color: darken($highlight-border, 15%);
           box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075),
                 0 0 5px rgba(darken($highlight-border, 15%), .5);
-          color: $gray-darkest;
+          color: $gray-950;
         }
       }
 
@@ -821,7 +821,7 @@ $story-sp-input-width:          50px;
 
 #show_completed_sprints {
   margin-left: $padding-side / 2;
-  color: $gray-darkest;
+  color: $gray-950;
   cursor: pointer;
 }
 

src/sass/plugins/redmine_backlogs/taskboard.scss

@@ -86,7 +86,7 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
 }
 
 .board {
-  border: 1px solid $gray;
+  border: 1px solid $gray-700;
   border-top: 0 none;
   background-color: $body-bg;
   color: $text-color;
@@ -141,7 +141,7 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
 }
 
 .story {
-  color: $gray-darker;
+  color: $gray-900;
 
   .id {
     margin-bottom: 5px;
@@ -157,11 +157,11 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
     .remaininghours {
       margin-left: 4px;
       float: right;
-      font-weight: normal;
+      font-weight: $font-weight-normal;
     }
 
     a {
-      color: $gray-darkest;
+      color: $gray-950;
       font-size: $font-size-small-px;
       font-weight: $font-weight-bold;
     }
@@ -226,8 +226,8 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
     float: left;
     border: 0 none;
     border-radius: $border-radius-large;
-    background-color: $gray-lighter;
+    background-color: $gray-400;
-    color: $gray-darker;
+    color: $gray-900;
     font-size: 10px;
     line-height: 1.3;
     cursor: move;
@@ -259,7 +259,7 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
     }
 
     a {
-      color: $gray-darkest;
+      color: $gray-950;
     }
   }
 

svg/calendar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="880.5 896.5 16 16"><path fill="red" d="M882.5 910.5h2.3v-2.3h-2.3v2.3zm2.8 0h2.5v-2.3h-2.5v2.3zm-2.8-2.8h2.3v-2.5h-2.3v2.5zm2.8 0h2.5v-2.5h-2.5v2.5zm-2.8-3h2.3v-2.2h-2.3v2.3zm5.8 5.8h2.5v-2.3h-2.5v2.3zm-3-5.8h2.5v-2.2h-2.5v2.3zm6 5.8h2.2v-2.3h-2.3v2.3zm-3-2.8h2.5v-2.5h-2.5v2.5zm-2.8-6.7v-2.3-.1l-.2-.1h-.7l-.1.2v2.5H885.5l.1-.2zm5.8 6.8h2.2v-2.5h-2.3v2.5zm-3-3h2.5v-2.3h-2.5v2.3zm3 0h2.2v-2.3h-2.3v2.3zm.2-3.8v-2.3-.1l-.2-.1h-.7l-.1.2v2.5H891.5l.1-.2zm3-.5v10c0 .3-.1.5-.3.7s-.4.3-.7.3h-11c-.3 0-.5-.1-.7-.3s-.3-.4-.3-.7v-10c0-.3.1-.5.3-.7s.4-.3.7-.3h1v-.8c0-.3.1-.6.4-.8s.5-.4.8-.4h.5c.4 0 .7.1 1 .4s.3.5.3.8v.8h3v-.8c0-.3.1-.6.4-.8s.5-.4.8-.4h.5c.4 0 .7.1 1 .4s.3.5.3.8v.8h1c.3 0 .5.1.7.3s.3.4.3.7z"/></svg>

svg/chevron-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="red" d="M8.996 12.659l-3.5-4a1.002 1.002 0 0 1 0-1.317l3.5-4a1 1 0 1 1 1.503 1.317L7.576 8l2.924 3.342a1 1 0 1 1-1.504 1.317z"/></svg>

svg/chevron-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="red" d="M6.25 13a1 1 0 0 1-.752-1.658L8.422 8 5.499 4.659a1 1 0 1 1 1.503-1.317l3.5 4c.329.377.329.94 0 1.317l-3.5 4A.993.993 0 0 1 6.25 13z"/></svg>

svg/diff-added.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="-14.5 16.5 14 14"><path fill="red" d="M-1.5 16.5h-12c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-12c0-.55-.45-1-1-1zm0 13h-12v-12h12v12zm-7-5h-3v-2h3v-3h2v3h3v2h-3v3h-2v-3z"/></svg>

svg/diff-copied.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="-7.5 8.5 14 14"><path fill="red" d="M5.5 8.5h-12c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-12c0-.55-.45-1-1-1zm0 13h-12v-12h12v12z"/><path fill="red" d="M4 13l-6 6-3-3 1.5-1.5L-2 16l4.5-4.5z"/></svg>

svg/diff-deleted.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="-7.5 9.5 14 14"><path fill="red" d="M5.5 9.5h-12c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-12c0-.55-.45-1-1-1zm0 13h-12v-12h12v12zm-2-5h-8v-2h8v2z"/></svg>

svg/diff-modified.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="-14.5 16.5 14 14"><path fill="red" d="M-1.5 16.5h-12c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-12c0-.55-.45-1-1-1zm0 13h-12v-12h12v12zm-9-6c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"/></svg>

svg/diff-renamed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="-7.5 9.5 14 14"><path fill="red" d="M-1.5 17.5h-3v-2h3v-3l5 4-5 4v-3zm8-7v12c0 .55-.45 1-1 1h-12c-.55 0-1-.45-1-1v-12c0-.55.45-1 1-1h12c.55 0 1 .45 1 1zm-1 0h-12v12h12v-12z"/></svg>

svg/minus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="red" d="M4 7h8v2H4z"/></svg>

svg/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="-1 -1 16 16"><path fill="red" d="M11 6H8V3H6v3H3v2h3v3h2V8h3z"/></svg>

svg/priority-blocker.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="red" d="M7 1.25C3.829 1.25 1.25 3.829 1.25 7S3.829 12.75 7 12.75s5.75-2.579 5.75-5.75S10.171 1.25 7 1.25zM10.5 8h-7a1 1 0 1 1 0-2h7a1 1 0 1 1 0 2z"/></svg>

svg/priority-critical.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="red" d="M11.6 4.2l-4-3a.999.999 0 0 0-1.2 0l-4 3A1 1 0 0 0 2 5v7a1.001 1.001 0 0 0 1.6.8L7 10.25l3.4 2.55a.995.995 0 0 0 1.047.095c.339-.17.553-.516.553-.895V5a1 1 0 0 0-.4-.8z"/></svg>

svg/priority-high.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="red" d="M10.999 9.5a.996.996 0 0 1-.599-.2L7 6.75 3.6 9.3a1 1 0 0 1-1.2-1.6l4-3a.996.996 0 0 1 1.2 0l4 3a.999.999 0 0 1-.601 1.8z"/></svg>

svg/priority-highest.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><g fill="red"><path d="M10.999 7a.994.994 0 0 1-.599-.2L7 4.25 3.6 6.8a1 1 0 0 1-1.2-1.6l4-3a.995.995 0 0 1 1.199 0l4 3a.998.998 0 0 1 .2 1.399.992.992 0 0 1-.8.401z"/><path opacity=".7" d="M10.999 12a.994.994 0 0 1-.599-.2L7 9.25 3.6 11.8a1 1 0 0 1-1.2-1.599l4-3a.995.995 0 0 1 1.199 0l4 3a.998.998 0 0 1-.6 1.799z"/></g></svg>

svg/priority-low.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="red" d="M7 9.5a.995.995 0 0 1-.6-.2l-4-3a1 1 0 0 1 1.2-1.6L7 7.25l3.4-2.55a1 1 0 0 1 1.2 1.599l-4 3A.99.99 0 0 1 7 9.5z"/></svg>

svg/priority-lowest.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><g fill="red"><path d="M7 12a.995.995 0 0 1-.6-.2l-4-3a1 1 0 0 1 1.2-1.6L7 9.75l3.4-2.55a1 1 0 0 1 1.2 1.599l-4 3A.99.99 0 0 1 7 12z"/><path opacity=".7" d="M7 7a.995.995 0 0 1-.6-.2l-4-3a1 1 0 0 1 1.2-1.6L7 4.75l3.4-2.55a1 1 0 0 1 1.2 1.599l-4 3A.99.99 0 0 1 7 7z"/></g></svg>

svg/priority-major.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="red" d="M11.707 5.293l-4-4a.999.999 0 0 0-1.414 0l-4 4a.999.999 0 1 0 1.414 1.414L6 4.414V12a1 1 0 1 0 2 0V4.414l2.293 2.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414z"/></svg>

svg/priority-medium.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="red" d="M11.5 6h-9a1 1 0 1 1 0-2h9a1 1 0 1 1 0 2zM11.5 10h-9a1 1 0 1 1 0-2h9a1 1 0 1 1 0 2z"/></svg>

svg/priority-minor.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="red" d="M11.707 7.293a.999.999 0 0 0-1.414 0L8 9.586V2a1 1 0 1 0-2 0v7.586L3.707 7.293a.999.999 0 1 0-1.414 1.414l4 4a.997.997 0 0 0 1.414 0l4-4a.999.999 0 0 0 0-1.414z"/></svg>

svg/priority-trivial.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="red" d="M7 13c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zM7 3C4.794 3 3 4.794 3 7s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4z"/></svg>