Fix #199 wrap key-values in issues list

lint-action doesn't work for forks

.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  "extends": "standard",
+  "globals": {
+    "$": "readonly",
+    "localStorage": "readonly",
+  },
+  "ignorePatterns": [
+    "/javascripts/",
+  ],
+};

.github/workflows/lint.yml

@@ -0,0 +1,33 @@
+name: Run linters
+
+on:
+  push:
+    branches:
+      - 'master'
+      - 'v*.*'
+  pull_request:
+
+jobs:
+  lint:
+    runs-on: ubuntu-18.04
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Use Node.js 10.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: "10.x"
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Eslint
+        run: npm run lint:js
+
+      - name: Stylelint
+        run: npm run lint:sass
+
+      - name: Check build
+        run: npm run build

.gitignore

@@ -3,3 +3,4 @@
 /src/sass/_custom-variables.scss
 /.sublime-grunt.cache
 /images/logo
+/.stylelintcache

.lintstagedrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  "src/**/*.js": files => [
+    `eslint "${files.join('" "')}"`,
+    'grunt js',
+    'git add javascripts/'
+  ],
+  "src/**/*.scss": files => [
+    `stylelint "${files.join('" "')}"`,
+    'grunt css',
+    'git add stylesheets/ plugins/'
+  ],
+}

.scss-lint.yml

@@ -1,178 +0,0 @@
-scss_files: "src/sass/**/*.scss"
-
-exclude: 'src/sass/lib/**'
-
-linters:
-  BangFormat:
-    enabled: true
-    space_before_bang: true
-    space_after_bang: false
-
-  BorderZero:
-    enabled: true
-
-  ColorKeyword:
-    enabled: true
-
-  ColorVariable:
-    enabled: false
-
-  Comment:
-    enabled: true
-
-  DebugStatement:
-    enabled: true
-
-  DeclarationOrder:
-    enabled: true
-
-  DuplicateProperty:
-    enabled: true
-    ignore_consecutive:
-      - word-break
-
-  ElsePlacement:
-    enabled: true
-
-  EmptyLineBetweenBlocks:
-    enabled: true
-    ignore_single_line_blocks: true
-
-  EmptyRule:
-    enabled: true
-
-  FinalNewline:
-    enabled: true
-    present: true
-
-  HexLength:
-    enabled: true
-    style: short
-
-  HexNotation:
-    enabled: true
-    style: lowercase
-
-  HexValidation:
-    enabled: true
-
-  IdSelector:
-    enabled: false
-
-  ImportantRule:
-    enabled: true
-
-  ImportPath:
-    enabled: true
-    leading_underscore: false
-    filename_extension: false
-
-  Indentation:
-    enabled: true
-    character: space
-    width: 2
-
-  LeadingZero:
-    enabled: true
-    style: exclude_zero
-
-  MergeableSelector:
-    enabled: false
-
-  NestingDepth:
-    enabled: true
-    max_depth: 7
-
-  PlaceholderInExtend:
-    enabled: true
-
-  PropertySortOrder:
-    enabled: true
-    order: smacss
-    ignore_unspecified: true
-
-  PropertySpelling:
-    enabled: true
-    extra_properties: []
-
-  PseudoElement:
-    enabled: true
-
-  QualifyingElement:
-    enabled: false
-
-  SelectorDepth:
-    enabled: true
-    max_depth: 5
-
-  SelectorFormat:
-    enabled: false
-
-  Shorthand:
-    enabled: true
-
-  SingleLinePerProperty:
-    enabled: true
-    allow_single_line_rule_sets: true
-
-  SingleLinePerSelector:
-    enabled: true
-
-  SpaceAfterComma:
-    enabled: true
-
-  SpaceAfterPropertyColon:
-    enabled: true
-    style: at_least_one_space
-
-  SpaceAfterPropertyName:
-    enabled: true
-
-  SpaceAfterVariableName:
-    enabled: true
-
-  SpaceAroundOperator:
-    enabled: true
-
-  SpaceBeforeBrace:
-    enabled: true
-    style: space
-    allow_single_line_padding: true
-
-  SpaceBetweenParens:
-    enabled: true
-    spaces: 0
-
-  StringQuotes:
-    enabled: true
-    style: double_quotes
-
-  TrailingSemicolon:
-    enabled: true
-
-  TrailingWhitespace:
-    enabled: true
-
-  TrailingZero:
-    enabled: true
-
-  TransitionAll:
-    enabled: true
-
-  UnnecessaryMantissa:
-    enabled: true
-
-  UnnecessaryParentReference:
-    enabled: true
-
-  UrlFormat:
-    enabled: true
-
-  UrlQuotes:
-    enabled: true
-
-  VendorPrefix:
-    enabled: true
-
-  ZeroUnit:
-    enabled: true

.stylelintrc.js

@@ -0,0 +1,498 @@
+module.exports = {
+  'ignoreFiles': [
+    'src/sass/lib/**'
+  ],
+  'plugins': [
+    'stylelint-order',
+    'stylelint-scss'
+  ],
+  'rules': {
+    'at-rule-name-case': 'lower',
+    'at-rule-name-space-after': 'always-single-line',
+    'at-rule-no-vendor-prefix': true,
+    'at-rule-semicolon-newline-after': 'always',
+    'at-rule-semicolon-space-before': 'never',
+    'block-closing-brace-empty-line-before': 'never',
+    'block-closing-brace-newline-after': [
+      'always',
+      {
+        'ignoreAtRules': [
+          'if',
+          'else'
+        ]
+      }
+    ],
+    'block-closing-brace-newline-before': 'always-multi-line',
+    'block-closing-brace-space-before': 'always-single-line',
+    'block-no-empty': true,
+    'block-opening-brace-newline-after': 'always-multi-line',
+    'block-opening-brace-space-after': 'always-single-line',
+    'block-opening-brace-space-before': 'always-multi-line',
+    'color-hex-case': 'lower',
+    'color-hex-length': 'short',
+    'color-no-invalid-hex': true,
+    'comment-no-empty': true,
+    'comment-whitespace-inside': 'always',
+    'custom-property-pattern': /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/,
+    'declaration-bang-space-after': 'never',
+    'declaration-bang-space-before': 'always',
+    'declaration-block-no-duplicate-properties': [
+      true,
+      {
+        'ignoreProperties': [
+          'word-break',
+        ]
+      }
+    ],
+    'declaration-block-no-redundant-longhand-properties': true,
+    'declaration-block-no-shorthand-property-overrides': true,
+    'declaration-block-semicolon-newline-after': 'always-multi-line',
+    'declaration-block-semicolon-space-after': 'always-single-line',
+    'declaration-block-semicolon-space-before': 'never',
+    'declaration-block-trailing-semicolon': 'always',
+    'declaration-colon-space-after': 'always-single-line',
+    'declaration-colon-space-before': 'never',
+    'declaration-no-important': true,
+    'font-family-no-duplicate-names': true,
+    'function-calc-no-unspaced-operator': true,
+    'function-comma-newline-after': 'always-multi-line',
+    'function-comma-newline-before': 'never-multi-line',
+    'function-comma-space-after': 'always-single-line',
+    'function-comma-space-before': 'never',
+    'function-linear-gradient-no-nonstandard-direction': true,
+    'function-max-empty-lines': 1,
+    'function-name-case': 'lower',
+    'function-parentheses-newline-inside': 'always-multi-line',
+    'function-parentheses-space-inside': 'never-single-line',
+    'function-url-no-scheme-relative': true,
+    'function-url-quotes': 'always',
+    'function-whitespace-after': 'always',
+    'indentation': 2,
+    'keyframe-declaration-no-important': true,
+    'length-zero-no-unit': true,
+    'max-nesting-depth': 7,
+    'media-feature-colon-space-after': 'always',
+    'media-feature-colon-space-before': 'never',
+    'media-feature-name-case': 'lower',
+    'media-feature-parentheses-space-inside': 'never',
+    'media-feature-range-operator-space-after': 'always',
+    'media-feature-range-operator-space-before': 'always',
+    'media-query-list-comma-newline-after': 'always-multi-line',
+    'media-query-list-comma-newline-before': 'never-multi-line',
+    'media-query-list-comma-space-after': 'always-single-line',
+    'media-query-list-comma-space-before': 'never',
+    'no-duplicate-at-import-rules': true,
+    'no-eol-whitespace': true,
+    'no-extra-semicolons': true,
+    'no-missing-end-of-source-newline': true,
+    'number-leading-zero': 'never',
+    'number-no-trailing-zeros': true,
+    'property-case': 'lower',
+    'property-no-unknown': true,
+    'property-no-vendor-prefix': true,
+    'selector-attribute-brackets-space-inside': 'never',
+    'selector-attribute-operator-space-after': 'never',
+    'selector-attribute-operator-space-before': 'never',
+    'selector-attribute-quotes': 'always',
+    'selector-combinator-space-after': 'always',
+    'selector-combinator-space-before': 'always',
+    'selector-descendant-combinator-no-non-space': true,
+    'selector-list-comma-newline-after': 'always',
+    'selector-list-comma-newline-before': 'never-multi-line',
+    'selector-list-comma-space-before': 'never',
+    'selector-max-compound-selectors': 5,
+    'selector-max-empty-lines': 0,
+    'selector-max-universal': 1,
+    'selector-no-qualifying-type': [
+      true,
+      {
+        'ignore': [
+          'attribute',
+          'class',
+          'id'
+        ]
+      }
+    ],
+    'selector-pseudo-class-case': 'lower',
+    'selector-pseudo-class-parentheses-space-inside': 'never',
+    'selector-pseudo-element-case': 'lower',
+    'selector-pseudo-element-colon-notation': 'double',
+    'selector-type-case': 'lower',
+    'shorthand-property-no-redundant-values': true,
+    'string-no-newline': true,
+    'string-quotes': 'double',
+    'unit-case': 'lower',
+    'unit-no-unknown': true,
+    'value-list-comma-newline-before': 'never-multi-line',
+    'value-list-comma-space-after': 'always-single-line',
+    'value-list-comma-space-before': 'never',
+    'value-list-max-empty-lines': 1,
+    'value-no-vendor-prefix': true,
+
+    'order/order': [
+      [
+        'custom-properties',
+        'dollar-variables',
+        'declarations',
+        'rules'
+      ]
+    ],
+    'order/properties-order': [
+      {
+        'properties': [
+          'content',
+          'quotes'
+        ]
+      },
+      {
+        'properties': [
+          'display',
+          'visibility'
+        ]
+      },
+      {
+        'properties': [
+          'position',
+          'z-index',
+          'top',
+          'right',
+          'bottom',
+          'left'
+        ]
+      },
+      {
+        'properties': [
+          'box-sizing'
+        ]
+      },
+      {
+        'properties': [
+          'grid',
+          'grid-area',
+          'grid-auto-columns',
+          'grid-auto-flow',
+          'grid-auto-rows',
+          'grid-column',
+          'grid-column-end',
+          'grid-column-gap',
+          'grid-column-start',
+          'grid-gap',
+          'grid-row',
+          'grid-row-end',
+          'grid-row-gap',
+          'grid-row-start',
+          'grid-template',
+          'grid-template-areas',
+          'grid-template-columns',
+          'grid-template-rows'
+        ]
+      },
+      {
+        'properties': [
+          'flex',
+          'flex-basis',
+          'flex-direction',
+          'flex-flow',
+          'flex-grow',
+          'flex-shrink',
+          'flex-wrap',
+          'box-decoration-break',
+          'align-content',
+          'align-items',
+          'align-self',
+          'justify-content',
+          'order'
+        ]
+      },
+      {
+        'properties': [
+          'width',
+          'min-width',
+          'max-width',
+          'height',
+          'min-height',
+          'max-height'
+        ]
+      },
+      {
+        'properties': [
+          'margin',
+          'margin-top',
+          'margin-right',
+          'margin-bottom',
+          'margin-left'
+        ]
+      },
+      {
+        'properties': [
+          'padding',
+          'padding-top',
+          'padding-right',
+          'padding-bottom',
+          'padding-left'
+        ]
+      },
+      {
+        'properties': [
+          'float',
+          'clear'
+        ]
+      },
+      {
+        'properties': [
+          'overflow',
+          'overflow-x',
+          'overflow-y'
+        ]
+      },
+      {
+        'properties': [
+          'clip',
+          'zoom'
+        ]
+      },
+      {
+        'properties': [
+          'columns',
+          'column-gap',
+          'column-fill',
+          'column-rule',
+          'column-span',
+          'column-count',
+          'column-width'
+        ]
+      },
+      {
+        'properties': [
+          'table-layout',
+          'empty-cells',
+          'caption-side',
+          'border-spacing',
+          'border-collapse'
+        ]
+      },
+      {
+        'properties': [
+          'list-style',
+          'list-style-position',
+          'list-style-type',
+          'list-style-image'
+        ]
+      },
+      {
+        'properties': [
+          'transform',
+          'transform-origin',
+          'transform-style',
+          'backface-visibility',
+          'perspective',
+          'perspective-origin'
+        ]
+      },
+      {
+        'properties': [
+          'transition',
+          'transition-property',
+          'transition-duration',
+          'transition-timing-function',
+          'transition-delay'
+        ]
+      },
+      {
+        'properties': [
+          'animation',
+          'animation-name',
+          'animation-duration',
+          'animation-play-state',
+          'animation-timing-function',
+          'animation-delay',
+          'animation-iteration-count',
+          'animation-direction'
+        ]
+      },
+      {
+        'properties': [
+          'border',
+          'border-top',
+          'border-right',
+          'border-bottom',
+          'border-left',
+          'border-width',
+          'border-top-width',
+          'border-right-width',
+          'border-bottom-width',
+          'border-left-width'
+        ]
+      },
+      {
+        'properties': [
+          'border-style',
+          'border-top-style',
+          'border-right-style',
+          'border-bottom-style',
+          'border-left-style'
+        ]
+      },
+      {
+        'properties': [
+          'border-radius',
+          'border-top-left-radius',
+          'border-top-right-radius',
+          'border-bottom-left-radius',
+          'border-bottom-right-radius'
+        ]
+      },
+      {
+        'properties': [
+          'border-color',
+          'border-top-color',
+          'border-right-color',
+          'border-bottom-color',
+          'border-left-color'
+        ]
+      },
+      {
+        'properties': [
+          'outline',
+          'outline-color',
+          'outline-offset',
+          'outline-style',
+          'outline-width'
+        ]
+      },
+      {
+        'properties': [
+          'stroke-width',
+          'stroke-linecap',
+          'stroke-dasharray',
+          'stroke-dashoffset',
+          'stroke'
+        ]
+      },
+      {
+        'properties': [
+          'opacity'
+        ]
+      },
+      {
+        'properties': [
+          'background',
+          'background-color',
+          'background-image',
+          'background-repeat',
+          'background-position',
+          'background-size',
+          'box-shadow',
+          'fill'
+        ]
+      },
+      {
+        'properties': [
+          'color'
+        ]
+      },
+      {
+        'properties': [
+          'font',
+          'font-family',
+          'font-size',
+          'font-size-adjust',
+          'font-stretch',
+          'font-effect',
+          'font-style',
+          'font-variant',
+          'font-weight'
+        ]
+      },
+      {
+        'properties': [
+          'font-emphasize',
+          'font-emphasize-position',
+          'font-emphasize-style'
+        ]
+      },
+      {
+        'properties': [
+          'letter-spacing',
+          'line-height',
+          'word-spacing'
+        ]
+      },
+      {
+        'properties': [
+          'text-align',
+          'text-align-last',
+          'text-decoration',
+          'text-indent',
+          'text-justify',
+          'text-overflow',
+          'text-overflow-ellipsis',
+          'text-overflow-mode',
+          'text-rendering',
+          'text-outline',
+          'text-shadow',
+          'text-transform',
+          'text-wrap',
+          'word-wrap',
+          'word-break'
+        ]
+      },
+      {
+        'properties': [
+          'text-emphasis',
+          'text-emphasis-color',
+          'text-emphasis-style',
+          'text-emphasis-position'
+        ]
+      },
+      {
+        'properties': [
+          'vertical-align',
+          'white-space',
+          'hyphens'
+        ]
+      },
+      {
+        'properties': [
+          'src'
+        ]
+      },
+      {
+        'properties': [
+          'tab-size',
+          'counter-reset',
+          'counter-increment',
+          'resize',
+          'cursor',
+          'pointer-events',
+          'speak',
+          'user-select',
+          'nav-index',
+          'nav-up',
+          'nav-right',
+          'nav-down',
+          'nav-left'
+        ]
+      }
+    ],
+
+    'scss/at-else-closing-brace-newline-after': 'always-last-in-chain',
+    'scss/at-else-closing-brace-space-after': 'always-intermediate',
+    'scss/at-else-empty-line-before': 'never',
+    'scss/at-else-if-parentheses-space-before': 'always',
+    'scss/at-function-parentheses-space-before': 'never',
+    'scss/at-function-pattern': /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/,
+    'scss/at-if-closing-brace-newline-after': 'always-last-in-chain',
+    'scss/at-if-closing-brace-space-after': 'always-intermediate',
+    'scss/at-import-no-partial-leading-underscore': true,
+    'scss/at-mixin-argumentless-call-parentheses': 'never',
+    'scss/at-mixin-parentheses-space-before': 'never',
+    'scss/at-mixin-pattern': /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/,
+    'scss/declaration-nested-properties-no-divided-groups': true,
+    'scss/dollar-variable-colon-space-before': 'never',
+    'scss/dollar-variable-pattern': /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/,
+    'scss/operator-no-unspaced': true,
+    'scss/percent-placeholder-pattern': /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/,
+    'scss/selector-no-redundant-nesting-selector': true,
+  }
+};

.travis.yml

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

Gruntfile.js

@@ -38,7 +38,7 @@ module.exports = function (grunt) {
     postcss: {
       options: {
         processors: [
-          require('autoprefixer')({ browsers: 'last 2 versions' })
+          require('autoprefixer')()
         ]
       },
 

README.md

@@ -2,7 +2,7 @@
 
 A free Redmine theme for modern browsers.
 
-![The MIT License](https://img.shields.io/badge/license-MIT-584492.svg) [![Build Status](https://travis-ci.org/mrliptontea/PurpleMine2.svg?branch=master)](https://travis-ci.org/mrliptontea/PurpleMine2) [![Issues](https://img.shields.io/github/issues/mrliptontea/PurpleMine2.svg)](https://github.com/mrliptontea/PurpleMine2/issues) [![JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)
+![The MIT License](https://img.shields.io/badge/license-MIT-584492.svg) [![JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/) ![Run linters](https://github.com/mrliptontea/PurpleMine2/workflows/Run%20linters/badge.svg) [![Issues](https://img.shields.io/github/issues/mrliptontea/PurpleMine2.svg)](https://github.com/mrliptontea/PurpleMine2/issues)
 
 ---
 
@@ -56,6 +56,138 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe
 
 ## Changelog
 
+Latest (master):
+
+* Fixed #196 and #199: text wrapping in certain column types.
+
+v2.11.0 (2020-05-08):
+
+* Fixed #179: full screen mode issues when using redmine_wysiwyg_editor plugin.
+* Fixed #177: changed styling for icon-only buttons to resolve weird behavior on hover.
+* Added `$icon-width` variable.
+* Added margin in some places like after buttons, avatars.
+* Changed tooltip background to black.
+* Changed top menu styles.
+* Restored `$color-priorities` variable, `false` by default.
+* Added `parse-length($value, $side)` function for extracting length/width from margin/padding/border.
+* Fixed checkbox cell padding when issue table borders are enabled.
+* Added table icon to jstoolbar styles.
+* Refactored icons code.
+* Improved styles for [RedmineUP](https://www.redmineup.com/pages/plugins) plugins (Agile, Checklists, CRM, Tags).
+* Improved vertical alignment of certain form elements.
+* Improved styles for sortable elements.
+* Added new `.inline-flex` class.
+* Improved styles for [Redmine Banner](https://github.com/akiko-pusu/redmine_banner) plugin.
+
+v2.10.2 (2020-04-09):
+
+* Fixed #175: couldn't edit note when it's URL target.
+* Improved styling of some inline edit forms.
+
+v2.10.1 (2020-04-06):
+
+* Fixed #160: highlight color in jQuery UI menu, most notably in checklist plugin.
+
+v2.10.0 (2020-04-05):
+
+* Fixed #172 Collapsed/expended icons for completed versions.
+* Fixed #171 "Display" label in Gantt option.
+* Fixed #170 radio buttons in projects options.
+* Fixed #169 styles in the spent time tab.
+* Fixed #164: apply responsive overrides more generally
+* Fixed #159: wrapping long text in issue attributes.
+* Fixed #150: styling for query totals and expander in Agile plugin.
+* Fixed #148: full screen view for Dashboard plugin.
+* Fixed a "timeline" positioning in issue notes/changes.
+* Changed lightness of shades 50 and 950.
+* Changed loader styles.
+* Changed rouge syntax highlighter color scheme.
+
+v2.9.1 (2020-02-22):
+
+* Merged fix #155: $.load function removed from jQuery.
+* Fixed badge positioning in roadmap screen.
+
+v2.9.0 (2020-01-30):
+
+* Fixed #141: improved styling for issue edit form.
+* Fixed #142: TOC assumes `left` by default, also added new variables to control how it looks.
+* Fixed #143: `$main-menu-bg-hover` is now being used.
+* Resolved #144: added `$main-menu-bg-active` variable.
+* Resolved #145: added `$table-list-header-bg` variable.
+* Fixed #147: corrected forum edit attached files icon.
+* Fixed #153: improved styling for `label.block`.
+* Added styling for clear query button.
+* Improved responsive sidebar menu layout.
+
+v2.8.0 (2019-08-13):
+
+* Resolved #132: fixed spacing for headers on roadmap pages.
+* Merged fix #136: broken layout with large image attachment.
+
+v2.7.0 (2019-06-13):
+
+* Resolved #124: added support for [issue-id](http://projects.andriylesyuk.com/projects/issue-id/) plugin.
+
+v2.6.0 (2019-06-13):
+
+* Resolved #121: added support for [redmine_wiki_page_tree](https://github.com/ledsun/redmine_wiki_page_tree) plugin.
+
+v2.5.0 (2019-06-05):
+
+* Fixed #117, #118 and added many improvements to the responsive layout.
+
+v2.4.0 (2019-06-02):
+
+* Synchronized most application styles with Redmine's default theme.
+* Fixed #115: color overdue date in issue lists.
+
+v2.3.1 (2019-05-09):
+
+* Fixed #112: improved highlight contrast in text diffs.
+
+v2.3.0 (2019-05-09):
+
+* Fixed #107: nested lists in the sidebar via [Additionals](https://www.redmine.org/plugins/additionals) plugin.
+
+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:
+  * Fixed #89: [RM+ custom menu](http://rmplus.pro/en/redmine/plugins/custom_menu) breaking the layout
+  * Fixed #90: regression in some sidebar layouts
+  * Fixed #93: Agile chart expanding indefinitely when Additional "Go to top" link is enabled
+  * Fixed #94: subtasks indentation
+  * Fixed styling of some flash messages
+  * Fixed horizontal scrollbar appearing when sidebar is on the right
+  * Fixed footer being mispositioned in Agile charts
+  * Fixed positioning of admin menu icons for some plugins
+  * Improved support for [Redmine Tags](https://www.redmineup.com/pages/plugins/tags) plugin
+  * Added separator line between news on the news list
+  * Improved Redmine 4.0 compatibility
+  * Updated Font Awesome icons to 4.7.0
+
+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

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "PurpleMine2",
+  "name": "purplemine",
   "description": "A free Redmine 2.6+ theme written in SCSS",
   "keywords": [
     "redmine",
@@ -20,30 +20,41 @@
   "scripts": {
     "build": "grunt",
     "watch": "grunt watch",
-    "lint:js": "standard",
+    "lint:js": "eslint src/javascripts/",
-    "lint:sass": "scss-lint",
+    "lint:sass": "stylelint src/sass/**/*.scss",
     "lint": "npm run -S lint:js && npm run -S lint:sass"
   },
   "dependencies": {
-    "autoprefixer": "^9.4.10",
+    "autoprefixer": "^9.8.0",
-    "grunt": "^1.0.3",
+    "grunt": "^1.1.0",
-    "grunt-contrib-uglify": "^4.0.0",
+    "grunt-contrib-uglify": "^4.0.1",
     "grunt-contrib-watch": "^1.1.0",
     "grunt-postcss": "^0.9.0",
-    "grunt-sass": "^3.0.2",
+    "grunt-sass": "^3.1.0",
-    "node-sass": "^4.11.0",
+    "node-sass": "^4.14.1",
-    "sass-inline-svg": "^1.2.0"
+    "sass-inline-svg": "^1.2.3"
   },
   "devDependencies": {
-    "standard": "^12.0.1"
+    "eslint": "^7.1.0",
+    "eslint-config-standard": "^14.1.1",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.2.6",
+    "stylelint": "^13.5.0",
+    "stylelint-order": "^4.0.0",
+    "stylelint-scss": "^3.17.2"
   },
-  "standard": {
+  "browserslist": [
-    "globals": [
+    "last 2 versions",
-      "$",
+    "> 1%",
-      "localStorage"
+    "not dead"
-    ],
+  ],
-    "ignore": [
+  "husky": {
-      "/javascripts"
+    "hooks": {
-    ]
+      "pre-commit": "lint-staged --relative"
+    }
   }
 }

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 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}
+.ui-multiselect{padding:2px 0 2px 4px;text-align:left}.ui-multiselect span.ui-icon{float:right}.ui-multiselect-single .ui-multiselect-checkboxes input{position:absolute !important;top:auto !important;left:-9999px}.ui-multiselect-single .ui-multiselect-checkboxes label{padding:5px !important}.ui-multiselect-header{margin-bottom:3px;padding:3px}.ui-multiselect-header ul{font-size:.92em}.ui-multiselect-header ul li{padding:0 10px 0 0;float:left}.ui-multiselect-header a{text-decoration:none}.ui-multiselect-header a:hover{text-decoration:underline}.ui-multiselect-header span.ui-icon{float:left}.ui-multiselect-header li.ui-multiselect-close{padding-right:0;float:right;text-align:right}.ui-multiselect-menu{box-shadow:0 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 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}
+.qtip{position:absolute;top:-31000px;left:-31000px;width:auto;max-width:500px;outline:none}.ui-tooltip-content{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{position:absolute;z-index:10;margin:0 auto;overflow:hidden;border:0 none;border-color:#d1d3e0;background:transparent;background-color:#fff}

src/javascripts/modules/HistoryTabs.js

@@ -55,7 +55,7 @@ PurpleMine.HistoryTabs = (function () {
 
     this._ = translations[this.lang]
 
-    if (this.$history.length > 0) {
+    if (this.$history.length > 0 && $('#history > h3').length > 0) {
       buildTabs()
       markFirstOfTypes()
     }

src/javascripts/modules/MenuCollapse.js

@@ -47,6 +47,7 @@ PurpleMine.MenuCollapse = (function () {
     }
 
     for (var menu in this.menus) {
+      // eslint-disable-next-line no-prototype-builtins
       if (this.menus.hasOwnProperty(menu) && this.menus[menu].$el.length > 0) {
         handleMenu(menu)
       }

src/javascripts/modules/RevisionGraph.js

@@ -52,6 +52,7 @@ PurpleMine.RevisionGraph = function (holder, commitsHash, graphSpace) {
   var revisionDotOverlay
 
   $.each(commits, function (index, commit) {
+    // eslint-disable-next-line no-prototype-builtins
     if (!commit.hasOwnProperty('space')) {
       commit.space = 0
     }
@@ -72,6 +73,7 @@ PurpleMine.RevisionGraph = function (holder, commitsHash, graphSpace) {
       parentCommit = commitsByScmid[parentScmid]
 
       if (parentCommit) {
+        // eslint-disable-next-line no-prototype-builtins
         if (!parentCommit.hasOwnProperty('space')) {
           parentCommit.space = 0
         }

src/javascripts/modules/SidebarToggler.js

@@ -44,7 +44,7 @@ PurpleMine.SidebarToggler = (function () {
 
     // Fix issue with context menu position
     if (this.$main.css('position') === 'relative') {
-      $(window).load(function () {
+      $(window).on('load', function () {
         $('#context-menu').appendTo('#wrapper3')
       })
     }

src/sass/_functions.scss

@@ -0,0 +1,4 @@
+// Functions
+// --------------------------------------------------
+
+@import "functions/parse-length";

src/sass/_variables.scss

@@ -2,16 +2,19 @@
 // Variables
 // --------------------------------------------------
 
+// stylelint-disable indentation
 
 //== Some key attributes
 //
 
 $fixed-layout:                  false !default;
+$css-grid-layout:               false !default;
 $flexbox-layout:                true !default;
 $sidebar-position:              left !default;
 $clean-issues:                  true !default;
 $color-trackers:                true !default;
 $color-status:                  true !default;
+$color-priorities:              false !default;
 $priority-icon:                 true !default;
 $use-gravatars:                 true !default;
 $use-logo:                      false !default;
@@ -21,6 +24,7 @@ $issue-subject-large:           true !default;
 $enable-sidebar-toggler:        true !default;
 $wiki-page-more-vertical-space: true !default;
 $top-menu-collapse:             false !default;
+$agile-board-customize:         true !default;
 
 
 //== Colors
@@ -41,7 +45,7 @@ $black:                         #000 !default;
 $gray:                          hsl(hue($indigo), 20%, 85%) !default;
 
 $shade-map: (
-  50:                           90%,
+  50:                           87.5%,
   100:                          80%,
   200:                          65%,
   300:                          40%,
@@ -51,7 +55,7 @@ $shade-map: (
   700:                          40%,
   800:                          65%,
   900:                          80%,
-  950:                          90%
+  950:                          87.5%
 ) !default;
 
 @function shade($color, $shade: 500) {
@@ -164,6 +168,12 @@ $wiki-font-size:                16px !default;
 $wiki-line-height:              1.6 !default;
 $wiki-preview-bg:               $body-bg !default;
 
+$toc-bg:                        $gray-50 !default;
+$toc-border:                    $gray-300 !default;
+$toc-text:                      $text-color !default;
+$toc-link:                      $link-color !default;
+$toc-link-hover:                $link-hover-color !default;
+$toc-shadow:                    0 1px 3px rgba($black, .07) !default;
 $toc-active-link:               darken($link-color, 10%) !default;
 $toc-active-link-hover:         shade($toc-active-link, 700) !default;
 $toc-active-border:             $link-color !default;
@@ -213,6 +223,7 @@ $collapsible-max-height:        10000px !default;
 $table-cell-padding:            8px !default;
 $table-condensed-cell-padding:  5px !default;
 
+$table-list-header-bg:          $body-bg !default;
 $table-list-header-border:      0 0 2px !default;
 $table-list-item-border:        0 !default;
 $table-list-color-odd-rows:     true !default;
@@ -228,6 +239,11 @@ $table-bg-active:               $table-bg-hover !default;
 
 $table-border-color:            $gray-300 !default;
 
+$table-color-odd-factor:        if($table-list-color-odd-rows, $table-accent-factor * .8, $table-accent-factor * .5) !default;
+$table-color-even-factor:       if($table-list-color-even-rows, $table-accent-factor * .8, $table-accent-factor * .5) !default;
+$table-color-hover-factor:      $table-hover-factor * .5 !default;
+$table-color-border-shade:      100 !default;
+
 
 //== Issue statuses
 //
@@ -294,6 +310,65 @@ $priority-default-icons-map: (
 $priority-custom-icons-map:     () !default;
 $priority-icons-map:            map-merge($priority-default-icons-map, $priority-custom-icons-map);
 
+$priority-default-color-map: (
+  lowest: (
+    border:                     shade($green, $table-color-border-shade),
+    background:                 $green,
+    color:                      $text-color,
+    link:                       shade($green, 700),
+  ),
+  low2: (
+    border:                     shade(mix($teal, $green), $table-color-border-shade),
+    background:                 mix($teal, $green),
+    color:                      $text-color,
+    link:                       shade(mix($teal, $green), 700),
+  ),
+  low3: (
+    border:                     shade($teal, $table-color-border-shade),
+    background:                 $teal,
+    color:                      $text-color,
+    link:                       shade($teal, 700),
+  ),
+  default: (
+    border:                     shade($blue, $table-color-border-shade),
+    background:                 $blue,
+    color:                      $text-color,
+    link:                       shade($blue, 700),
+  ),
+  high5: (
+    border:                     shade($purple, $table-color-border-shade),
+    background:                 $purple,
+    color:                      $text-color,
+    link:                       shade($purple, 700),
+  ),
+  high4: (
+    border:                     shade($orange, $table-color-border-shade),
+    background:                 $orange,
+    color:                      $text-color,
+    link:                       shade($orange, 700),
+  ),
+  high3: (
+    border:                     shade(mix($red, $orange), $table-color-border-shade),
+    background:                 mix($red, $orange),
+    color:                      $text-color,
+    link:                       shade(mix($red, $orange), 700),
+  ),
+  high2: (
+    border:                     shade($red, $table-color-border-shade),
+    background:                 $red,
+    color:                      $text-color,
+    link:                       shade($red, 700),
+  ),
+  highest: (
+    border:                     shade($red, $table-color-border-shade),
+    background:                 $red,
+    color:                      $text-color,
+    link:                       shade($red, 700),
+  )
+) !default;
+$priority-custom-color-map:     () !default;
+$priority-color-map:            map-merge($priority-default-color-map, $priority-custom-color-map);
+
 
 //== Trackers links
 //
@@ -396,6 +471,7 @@ $btn-success-border:            $btn-success-bg !default;
 //== Action icons
 //
 
+$icon-width:                    20px !default;
 $icon-opacity:                  .7 !default;
 $icon-hover-opacity:            1 !default;
 $icon-color-map: (
@@ -479,13 +555,13 @@ $header-title-line-height:      $line-height-computed * 1.5 !default;
 
 $responsive-header-height:      54px !default;
 
-$flyout-menu-bg:                shade($header-bg, 800) !default;
+$flyout-menu-bg:                shade($header-bg, 700) !default;
 $flyout-menu-text:              $white !default;
 $flyout-menu-link:              $white !default;
-$flyout-menu-link-active-bg:    $header-bg !default;
+$flyout-menu-link-active-bg:    shade($header-bg, 50) !default;
-$flyout-menu-link-active:       $white !default;
+$flyout-menu-link-active:       $text-color !default;
-$flyout-menu-header-bg:         shade($header-bg, 900) !default;
+$flyout-menu-header-bg:         shade($header-bg, 800) !default;
-$flyout-menu-header-border:     shade($header-bg, 900) !default;
+$flyout-menu-header-border:     shade($header-bg, 800) !default;
 $flyout-menu-header-text:       $white !default;
 
 $quick-search-width:            200px !default;
@@ -503,6 +579,7 @@ $logo-space:                    floor($header-padding-vertical / 2) !default;
 
 $main-menu-bg:                  $gray-100 !default;
 $main-menu-bg-hover:            $gray-100 !default;
+$main-menu-bg-active:           transparent !default;
 $main-menu-link:                $gray-900 !default;
 $main-menu-link-active:         $black !default;
 $main-menu-border:              $gray-400 !default;
@@ -574,6 +651,11 @@ $flash-success-border:          shade($green, 500) !default;
 $flash-success-text:            $white !default;
 $flash-success-link:            $white !default;
 
+$flash-info-bg:                 shade($blue, 100) !default;
+$flash-info-border:             shade($blue, 200) !default;
+$flash-info-text:               shade($blue, 800) !default;
+$flash-info-link:               shade($blue, 900) !default;
+
 $flash-warning-bg:              shade($yellow, 200) !default;
 $flash-warning-border:          shade($yellow, 300) !default;
 $flash-warning-text:            shade($yellow, 800) !default;
@@ -589,7 +671,7 @@ $flash-error-link:              $white !default;
 //
 
 $progress-height:               12px !default;
-$progress-bg:                   $gray-300 !default;
+$progress-bg:                   rgba($gray-500, .5) !default;
 $progress-bar-bg:               $brand-primary !default;
 $progress-bar-success-bg:       $brand-success !default;
 $progress-bar-danger-bg:        $brand-danger !default;
@@ -602,7 +684,7 @@ $progress-bar-info-bg:          $brand-info !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:                   $gray-900 !default;
+$panel-color:                   $text-color !default;
 $panel-bg:                      $gray-50 !default;
 $panel-border:                  $gray-400 !default;
 $panel-border-radius:           $border-radius-base !default;
@@ -638,10 +720,26 @@ $issue-attribute-padding-h:     5px !default;
 //== Speech "bubbles"
 //
 
+$bubble-bg:                     $issue-bg !default;
+$bubble-border:                 $issue-border !default;
+$bubble-text:                   $issue-text !default;
 $bubble-gravatar-size:          24px !default;
 $bubble-gravatar-space:         12px !default;
 $bubble-padding-vertical:       8px !default;
-$bubble-padding-horizontal:     15px !default;
+$bubble-padding-horizontal:     12px !default;
+$bubble-target-border:          saturate($brand-primary, 25%) !default;
+$bubble-target-shadow-alpha:    .2 !default;
+
+
+//== Badges
+//
+
+$badge-space:                   2px !default;
+$badge-padding-v:               0 !default;
+$badge-padding-h:               5px !default;
+$badge-border-radius:           $border-radius-base !default;
+$badge-font-size:               $font-size-small !default;
+$badge-font-weight:             $font-weight-bold !default;
 
 
 //== Media queries breakpoints
@@ -688,3 +786,67 @@ $login-form-adjustments-map: (
 $width-sm:                      $screen-sm - ($padding-side * 2) !default;
 $width-md:                      $screen-md - ($padding-side * 2) !default;
 $width-lg:                      $screen-lg - ($padding-side * 2) !default;
+
+
+//== Redmine Agile plugin
+// https://www.redmineup.com/pages/plugins/agile
+//
+
+$agile-board-background:        $gray-100 !default;
+$agile-issue-card-margin:       8px 10px !default;
+$agile-issue-card-padding:      7px !default;
+$agile-issue-card-border:       $gray-500;
+$agile-issue-card-border-width: 0 0 0 5px;
+$agile-issue-card-border-radius: $border-radius-large !default;
+$agile-issue-card-background:   $white !default;
+$agile-issue-card-color:        $text-color !default;
+$agile-issue-card-closed-background: $gray-300 !default;
+$agile-issue-card-default-color-map: (
+  bk-green: (
+    border: $green,
+    background: scale-color($green, $saturation: -5%, $lightness: 80%),
+    link: shade($green, 700),
+  ),
+  bk-blue: (
+    border: $blue,
+    background: scale-color($blue, $saturation: 50%, $lightness: 80%),
+    link: shade($blue, 700),
+  ),
+  bk-turquoise: (
+    border: $teal,
+    background: scale-color($teal, $saturation: -5%, $lightness: 80%),
+    link: shade($teal, 700),
+  ),
+  bk-lightgreen: (
+    border: adjust-color($green, $hue: -45deg),
+    background: scale-color(adjust-color($green, $hue: -45deg), $saturation: 75%, $lightness: 80%),
+    link: shade(adjust-color($green, $hue: -45deg), 700),
+  ),
+  bk-yellow: (
+    border: scale-color($yellow, $hue: 2deg),
+    background: scale-color($yellow, $hue: 2deg, $saturation: 75%, $lightness: 80%),
+    link: shade($yellow, 700),
+  ),
+  bk-orange: (
+    border: $orange,
+    background: scale-color($orange, $saturation: 75%, $lightness: 80%),
+    link: shade($orange, 700),
+  ),
+  bk-red: (
+    border: $red,
+    background: scale-color($red, $saturation: 75%, $lightness: 85%),
+    link: shade($red, 700),
+  ),
+  bk-purple: (
+    border: $purple,
+    background: scale-color($purple, $saturation: 75%, $lightness: 85%),
+    link: shade($purple, 700),
+  ),
+  bk-gray: (
+    border: $gray-600,
+    background: $gray-300,
+    link: $link-color,
+  ),
+) !default;
+$agile-issue-card-custom-color-map: () !default;
+$agile-issue-card-color-map:    map-merge($agile-issue-card-default-color-map, $agile-issue-card-custom-color-map);

src/sass/application.scss

@@ -1,4 +1,5 @@
 @import "variables";
+@import "functions";
 @import "mixins";
 
 @import "lib/normalize";
@@ -9,6 +10,7 @@
 //
 
 @import "components/base";
+@import "components/badges";
 @import "components/buttons";
 @import "components/forms";
 @import "components/tabs";

src/sass/components/_admin.scss

@@ -8,7 +8,7 @@
       list-style-type: none;
 
       > a:not(.icon-only) {
-        padding-left: $sidebar-padding-horizontal + 5px + 20px;
+        padding-left: $sidebar-padding-horizontal + 5px + $icon-width;
         background-repeat: no-repeat;
         background-position: $sidebar-padding-horizontal center;
       }
@@ -27,7 +27,7 @@
 
     a {
       display: inline-block;
-      padding-left: 5px + 20px;
+      padding-left: 5px + $icon-width;
       background-position: 0 center;
     }
   }
@@ -61,6 +61,13 @@ table.permissions {
 //== Workflows
 //
 
+.controller-workflows {
+  table.list,
+  fieldset.collapsible {
+    margin-bottom: $line-height-computed;
+  }
+}
+
 table.transitions {
   td.enabled {
     background: $state-success;
@@ -87,6 +94,29 @@ table.fields_permissions {
 }
 
 
+//== Custom fields -> Issues -> Key values
+//
+
+#custom_field_enumerations {
+  padding-left: 0;
+  list-style: none;
+
+  li {
+    min-height: $input-height-base;
+    padding: 1px 0;
+
+    .sort-handle,
+    label {
+      line-height: $input-height-base;
+    }
+
+    label input {
+      vertical-align: baseline;
+    }
+  }
+}
+
+
 //== Settings labels
 //
 

src/sass/components/_badges.scss

@@ -0,0 +1,54 @@
+tr.group .count,
+span.private,
+.badge {
+  display: inline-block;
+  position: relative;
+  top: -1px;
+  box-sizing: border-box;
+  min-width: 1em;
+  margin-right: $badge-space;
+  margin-left: $badge-space;
+  padding: $badge-padding-v $badge-padding-h;
+  border: 1px solid;
+  border-radius: $badge-border-radius;
+  font-size: $badge-font-size;
+  font-weight: $badge-font-weight;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+span.private,
+.badge-private {
+  padding: ($badge-padding-v + 1px) ($badge-padding-h + 1px);
+  border: 0;
+  background: $brand-warning;
+  color: $brand-text;
+
+  h3 & {
+    font-size: $font-size-small-px;
+  }
+}
+
+tr.group .count,
+.badge-count {
+  padding: ($badge-padding-v + 1px) ($badge-padding-h + 1px);
+  border: 0;
+  background: $brand-primary;
+  color: $brand-text;
+}
+
+.badge-status-open {
+  border-color: $blue;
+  color: $blue;
+}
+
+.badge-status-locked {
+  border-color: $gray-600;
+  color: $gray-600;
+}
+
+.badge-status-closed {
+  border-color: $green;
+  color: $green;
+}

src/sass/components/_base.scss

@@ -106,12 +106,27 @@ table {
   td {
     padding: $table-condensed-cell-padding $table-cell-padding;
   }
+
+  p {
+    margin: 0;
+  }
+
+  form {
+    p {
+      margin-bottom: ($line-height-computed / 2);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
 }
 
 ul,
 ol {
   margin-top: 0;
   margin-bottom: ($line-height-computed / 2);
+  padding-left: 1.5em;
 
   ul,
   ol {
@@ -143,13 +158,13 @@ samp {
 }
 
 hr {
-  margin-top:    $line-height-computed;
+  margin-top: $line-height-computed;
   margin-bottom: $line-height-computed;
   border: 0;
   border-top: 1px solid $hr-border;
 
   li & {
-    margin-top:    $line-height-computed / 2;
+    margin-top: $line-height-computed / 2;
     margin-bottom: $line-height-computed / 2;
   }
 }
@@ -159,11 +174,11 @@ blockquote {
   padding: floor($line-height-computed / 4) $padding-large-horizontal;
   border-left: 4px solid $blockquote-border-color;
 
-  >:first-child {
+  > :first-child {
     margin-top: 0;
   }
 
-  >:last-child {
+  > :last-child {
     margin-bottom: 0;
   }
 }

src/sass/components/_buttons.scss

@@ -9,9 +9,10 @@ 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: border-color $transition-time ease-in-out,
+  transition:
-              background-color $transition-time ease-in-out,
+    border-color $transition-time ease-in-out,
-              box-shadow $transition-time ease-in-out;
+    background-color $transition-time ease-in-out,
+    box-shadow $transition-time ease-in-out;
   border: 1px solid;
   font-weight: $btn-font-weight;
   text-align: center;
@@ -19,7 +20,7 @@ button {
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
-  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); // scss-lint:disable DeclarationOrder
+  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
 
   &:hover,
   &:focus {
@@ -47,12 +48,8 @@ form {
       @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
     }
 
-    + a {
+    ~ a {
-      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: 2px;
@@ -99,9 +96,10 @@ p.buttons,
     margin-right: 1px;
     margin-left: 1px;
     padding: $btn-padding-vertical $btn-padding-horizontal-small;
-    transition: border-color $transition-time ease-in-out,
+    transition:
-                background-color $transition-time ease-in-out,
+      border-color $transition-time ease-in-out,
-                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;
     font-size: $font-size-base;
@@ -142,6 +140,37 @@ p.buttons,
 }
 
 
+//== Submit + cancel
+//
+
+#issue-form,
+.mypage-box,
+.journal,
+.edit_news,
+.edit_content,
+.edit_time_entry,
+.edit_membership {
+  input[type="submit"] + a {
+    margin-left: ceil($btn-padding-horizontal-small / 2);
+  }
+}
+
+
+//== Apply + clear
+//
+
+form {
+  input,
+  button,
+  select {
+    ~ a {
+      margin-left: ceil($btn-padding-horizontal-small / 2);
+      line-height: $input-height-base;
+    }
+  }
+}
+
+
 //== Action buttons group
 //
 
@@ -181,10 +210,14 @@ p.buttons {
 
 .query-columns {
   select {
-    width: auto !important; // scss-lint:disable ImportantRule
+    width: auto !important; // stylelint-disable-line declaration-no-important
     min-width: 130px;
   }
 
+  label + & {
+    margin-left: $padding-side;
+  }
+
   @at-root span#{&} {
     > span {
       display: inline-block;
@@ -195,6 +228,7 @@ p.buttons {
     label {
       display: block;
       margin-bottom: $line-height-computed / 2;
+      line-height: initial;
     }
   }
 
@@ -211,7 +245,7 @@ p.buttons {
       margin-bottom: 4px;
       padding-right: 1px;
       padding-left: 1px;
-      @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); // scss-lint:disable DeclarationOrder
+      @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
     }
   }
 }
@@ -235,7 +269,11 @@ a[data-expands],
   vertical-align: top;
   cursor: pointer;
   user-select: none;
-  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); // scss-lint:disable DeclarationOrder
+  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
+
+  &.icon-only::before {
+    content: none;
+  }
 }
 
 a[data-expands] {
@@ -251,3 +289,8 @@ a[data-expands] {
     display: none;
   }
 }
+
+a.icon-toggle-minus[data-expands],
+select[multiple="multiple"] + .toggle-multiselect {
+  background-image: inline-svg("minus.svg", (path: (fill: $btn-default-icon-color)));
+}

src/sass/components/_calendar.scss

@@ -45,6 +45,10 @@ table.cal {
       color: $gray-600;
     }
 
+    &.nwday {
+      background: $table-bg-accent;
+    }
+
     &.today {
       background: $highlight-bg;
 

src/sass/components/_coderay.scss

@@ -18,7 +18,7 @@
   }
 
   .debug {
-    // scss-lint:disable ImportantRule
+    // stylelint-disable declaration-no-important
     background: #00f !important;
     color: #fff !important;
   }

src/sass/components/_content.scss

@@ -1,5 +1,20 @@
 #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 +29,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});
@@ -29,9 +46,29 @@
 // --------------------------------------------------
 
 #sidebar {
-  padding: $padding-side $sidebar-padding-horizontal;
+  #main & {
+    padding: $padding-side $sidebar-padding-horizontal;
+  }
 
-  @if $flexbox-layout {
+  #main.nosidebar & {
+    margin: 0;
+    padding: 0;
+    border: 0 none;
+
+    @if $css-grid-layout {
+      width: 0;
+    } @else if $flexbox-layout {
+      flex: 0 0 auto;
+    } @else {
+      width: 0;
+      float: none;
+    }
+  }
+
+  @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" {
@@ -58,19 +95,6 @@
     }
   }
 
-  .nosidebar & {
-    margin: 0;
-    padding: 0;
-    border: 0 none;
-
-    @if $flexbox-layout {
-      flex: 0 0 auto;
-    } @else {
-      width: 0;
-      float: none;
-    }
-  }
-
   h3 {
     margin-top: $line-height-computed * 1.5;
   }
@@ -87,8 +111,6 @@
 
       @if $sidebar-position == "left" {
         margin-right: -($sidebar-padding-horizontal);
-      } @else {
-        margin-left: -($sidebar-padding-horizontal);
       }
     }
 
@@ -107,6 +129,7 @@
             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;
           }
@@ -128,7 +151,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);
@@ -137,16 +160,170 @@
         }
       }
     }
+
+    &.queries {
+      > li {
+        position: relative;
+
+        > a.query {
+          padding-right: $sidebar-padding-horizontal * 1.5;
+        }
+
+        > a.icon-only {
+          position: absolute;
+          top: $sidebar-padding-vertical;
+          right: $sidebar-padding-horizontal / 2;
+          line-height: $line-height-computed;
+
+          &::before {
+            line-height: inherit;
+          }
+        }
+      }
+    }
+
+    &.pages-hierarchy {
+      .pages-hierarchy {
+        margin-left: $sidebar-padding-horizontal + 3px;
+        border-left: 2px solid $gray-400;
+
+        @if $sidebar-position == "right" {
+          margin-left: 3px;
+        } @else {
+          margin-right: 0;
+        }
+
+        li {
+          > a:not(.icon-only) {
+            padding-right: $sidebar-padding-horizontal / 2;
+            padding-left: $sidebar-padding-horizontal / 2;
+
+            @if $sidebar-position == "right" {
+              margin-left: 0;
+            }
+          }
+
+          .pages-hierarchy {
+            margin-left: $sidebar-padding-horizontal / 2 + 3px;
+          }
+        }
+      }
+    }
   }
 
   // Special treatment for anchor tags directly under sidebar tag
   > a {
-    padding: $sidebar-padding-vertical $sidebar-padding-horizontal;
+    margin: $sidebar-padding-vertical $sidebar-padding-horizontal;
 
     @if $sidebar-position == "left" {
-      padding-left: $sidebar-padding-horizontal + 3px;
+      margin-left: $sidebar-padding-horizontal + 3px;
     } @else {
-      padding-right: $sidebar-padding-horizontal + 3px;
+      margin-right: $sidebar-padding-horizontal + 3px;
+      margin-left: 0;
+    }
+  }
+
+  // For plugin https://github.com/ledsun/redmine_wiki_page_tree
+  div.page-tree {
+    margin: 0;
+    padding: 0;
+
+    .page-tree__title {
+      margin-left: 0;
+    }
+
+    .page-tree__list {
+      .page-tree__list {
+        margin-left: $sidebar-padding-horizontal + 3px;
+        border-left: 2px solid $gray-400;
+
+        @if $sidebar-position == "right" {
+          margin-left: 3px;
+        } @else {
+          margin-right: 0;
+        }
+
+        .page-tree__list {
+          margin-left: $sidebar-padding-horizontal / 2 + 3px;
+        }
+
+        summary {
+          padding-left: $sidebar-padding-horizontal + 8px;
+
+          @if $sidebar-position == "right" {
+            margin-left: 0;
+          }
+
+          &::before {
+            left: 6px;
+          }
+        }
+      }
+
+      li {
+        > a:not(.icon-only) {
+          padding-right: $sidebar-padding-horizontal / 2;
+          padding-left: $sidebar-padding-horizontal / 2;
+
+          @if $sidebar-position == "right" {
+            margin-left: 0;
+          }
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+
+    details {
+      summary {
+        display: block;
+        position: relative;
+        padding: 0 $sidebar-padding-horizontal;
+        padding-left: $sidebar-padding-horizontal * 1.5 + 8px;
+
+        @if $sidebar-position == "left" {
+          border-radius: $border-radius-large 0 0 $border-radius-large;
+        } @else {
+          margin-left: -($sidebar-padding-horizontal);
+          border-radius: 0 $border-radius-large $border-radius-large 0;
+        }
+
+        &::-webkit-details-marker {
+          display: none;
+        }
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: ($sidebar-padding-vertical + 1px) + ($line-height-computed - 16px) / 2;
+          left: $sidebar-padding-horizontal / 2 + 6px;
+          width: 16px;
+          height: 16px;
+          background-image: inline-svg("chevron-right.svg", (path: (fill: $btn-default-icon-color)));
+          background-repeat: no-repeat;
+        }
+
+        &:hover {
+          background-color: $sidebar-link-hover-bg;
+        }
+
+        a {
+          display: inline-block;
+          padding-top: ($sidebar-padding-vertical + 1px);
+          padding-bottom: ($sidebar-padding-vertical + 1px);
+
+          &:hover {
+            color: $sidebar-link-hover-text;
+            text-decoration: underline;
+          }
+        }
+      }
+
+      &[open] > summary::before {
+        transform: rotate(90deg);
+      }
     }
   }
 }
@@ -157,6 +334,10 @@
   border-top: 1px solid $gray-400;
   color: $gray-600;
   font-size: $font-size-small;
+
+  @if $css-grid-layout {
+    grid-area: footer;
+  }
 }
 
 @if $fixed-layout {

src/sass/components/_context-menu.scss

@@ -2,8 +2,8 @@
   .context-menu-selection {
     &,
     > td {
-      background-color: $brand-primary !important; // scss-lint:disable ImportantRule
+      background-color: $brand-primary !important; // stylelint-disable-line declaration-no-important
-      color: $brand-text !important; // scss-lint:disable ImportantRule
+      color: $brand-text !important; // stylelint-disable-line declaration-no-important
     }
   }
 
@@ -11,7 +11,7 @@
     > ul,
     > ul > li > ul {
       @include nice-shadow(2);
-      border: 0 none !important; // scss-lint:disable ImportantRule
+      border: 0 none !important; // stylelint-disable-line declaration-no-important
     }
 
     ul {

src/sass/components/_dropdown.scss

@@ -55,16 +55,17 @@
       }
     }
 
-    > a,
+    > * {
-    > span {
       display: block;
-      padding: $btn-padding-vertical $btn-padding-horizontal-small;
+      margin: 1px;
+      padding: ($btn-padding-vertical - 1px) ($btn-padding-horizontal-small - 1px);
+      border-radius: $border-radius-base - 1px;
 
       &.icon {
-        padding-left: 20px + $btn-padding-horizontal-small;
+        padding-left: $icon-width + $btn-padding-horizontal-small;
 
         &::before {
-          width: 20px;
+          width: $icon-width;
           margin-top: 3px;
           float: left;
           text-align: center;
@@ -93,8 +94,8 @@
       color: $pagination-color;
       text-align: center;
 
-      > .icon-only::before {
+      > .icon-only {
-        margin: 0 1px;
+        margin: 0 -4px;
       }
 
       &:hover,

src/sass/components/_elements.scss

@@ -7,27 +7,29 @@
 //
 
 a.collapsible,
+a.collapsible.icon,
 .collapsible > legend {
   color: $link-color;
   cursor: pointer;
   user-select: none;
 
-  &:hover {
+  &:hover,
+  &:focus {
     color: $link-hover-color;
+    text-decoration: none;
   }
 
   &::before {
-    content: "";
+    @include fa-icon;
-    display: inline-block;
+    content: $fa-var-chevron-down;
     position: relative;
-    top: -1px;
+    top: -.1em;
-    width: 0;
+    width: 1em;
-    height: 0;
+    height: 1em;
     margin-right: 3px;
     transform: rotate(0);
-    border-top:   6px solid;
+    color: $gray-600;
-    border-right: 4px solid transparent;
+    font-size: 12px;
-    border-left:  4px solid transparent;
     vertical-align: middle;
 
     @if $collapsible-animation-time > 0 {
@@ -37,6 +39,7 @@ a.collapsible,
 }
 
 a.collapsible.collapsed,
+a.collapsible.icon-collapsed,
 .collapsible.collapsed > legend {
   &::before {
     transform: rotate(-90deg);
@@ -51,7 +54,7 @@ a.collapsible.collapsed,
     transition: max-height $collapsible-animation-time ease-out;
 
     > div {
-      display: block !important; // scss-lint:disable ImportantRule
+      display: block !important; // stylelint-disable-line declaration-no-important
       visibility: visible;
       transition: visibility 0s 0s, opacity $collapsible-animation-time;
       opacity: 1;
@@ -98,19 +101,37 @@ a.collapsible.collapsed,
 //
 
 .hidden-for-sighted {
-  position: absolute;
+  // stylelint-disable declaration-no-important
-  top: auto;
+  position: absolute !important;
-  left: -10000px;
+  top: auto !important;
-  width: 1px;
+  left: -10000px !important;
-  height: 1px;
+  width: 1px !important;
-  overflow: hidden;
+  height: 1px !important;
+  overflow: hidden !important;
+  // stylelint-enable declaration-no-important
 }
 
+img {
+  image-orientation: from-image;
+}
+
+.filecontent-container {
+  position: relative;
+  min-height: 200px;
+  margin-bottom: $line-height-computed;
+
+  > .filecontent {
+    position: absolute;
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
 
 //== Responsive autoscroll
 //
 
 .autoscroll {
+  position: relative;
   margin-bottom: $line-height-computed;
   overflow-x: auto;
 }
@@ -136,7 +157,7 @@ a.collapsible.collapsed,
   }
 
   &:last-child,
-  >:last-child {
+  > :last-child {
     margin-bottom: 0;
   }
 
@@ -217,10 +238,7 @@ a.collapsible.collapsed,
       }
 
       img.gravatar {
-        position: relative;
-        top: 1px;
         margin-right: .5em;
-        vertical-align: top;
       }
     }
   }
@@ -235,6 +253,10 @@ a.collapsible.collapsed,
     @include check;
     display: block;
   }
+
+  .gravatar {
+    margin-right: $padding-small-vertical;
+  }
 }
 
 .roles-selection {
@@ -262,11 +284,13 @@ p.subtitle {
 }
 
 .block-receiver {
+  box-sizing: border-box;
   min-height: 20px;
-  margin: $padding-side / -2;
   margin-bottom: $line-height-computed;
-  padding: $padding-side / 2;
+
-  outline: 2px dashed $gray-600;
+  .dragging & {
+    outline: 2px dashed $gray-600;
+  }
 }
 
 .mypage-box {
@@ -286,7 +310,7 @@ p.subtitle {
   }
 
   &.ui-sortable-placeholder {
-    visibility: visible !important; // scss-lint:disable ImportantRule
+    visibility: visible !important; // stylelint-disable-line declaration-no-important
     outline: 1px dashed $highlight-border;
     background: $highlight-bg;
   }
@@ -318,22 +342,6 @@ a.close-icon {
 
 // For Redmine 3.4+
 #my-page {
-  .block-receiver {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    outline: none;
-  }
-
-  &.dragging .block-receiver {
-    box-sizing: border-box;
-    min-height: 20px;
-    margin: $padding-side / -2;
-    margin-bottom: $line-height-computed;
-    padding: $padding-side / 2;
-    outline: 2px dashed $gray-600;
-  }
-
   .mypage-box {
     > .contextual {
       transition: opacity $transition-time;
@@ -566,12 +574,22 @@ ul.projects {
 //
 
 div#roadmap {
+  article {
+    margin-bottom: $line-height-computed;
+  }
+
   .related-issues {
     margin-bottom: $line-height-computed;
 
     td.checkbox {
       display: none;
     }
+
+    td.assigned_to {
+      width: 1px;
+      padding-right: 0;
+      white-space: nowrap;
+    }
   }
 
   table.progress {
@@ -585,6 +603,20 @@ div#roadmap {
     }
   }
 
+  header {
+    display: block;
+
+    > h3 {
+      display: inline-block;
+    }
+  }
+
+  header > h3,
+  h3.version {
+    margin-bottom: 0;
+    padding-right: 0;
+  }
+
   .wiki {
     h1 {
       &:first-child {
@@ -631,16 +663,22 @@ div#version-summary {
 //== Ajax indicator
 //
 
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
 #ajax-indicator {
   @include nice-shadow(3);
   position: fixed;
   z-index: 100;
   top: 50%;
   left: 50%;
+  box-sizing: border-box;
   width: 200px;
-  margin: (($line-height-computed + $padding-large-vertical * 2 + 1px * 2) / -2) ((200px + $padding-large-horizontal * 2 + 1px * 2) / -2);
+  margin: (($padding-large-vertical * 2 + 1px * 2 + $line-height-computed) / -2) (200px / -2);
   padding: $padding-large-vertical $padding-large-horizontal;
   border: 1px solid $highlight-border;
+  border-radius: $border-radius-base;
   opacity: .9;
   background-color: $highlight-bg;
   color: $highlight-text;
@@ -648,11 +686,21 @@ div#version-summary {
   text-align: center;
 
   span {
-    padding-left: 26px;
+    line-height: $line-height-computed;
-    background-image: url("../../../images/loading.gif");
+
-    background-repeat: no-repeat;
+    &::before {
-    background-position: 0% 40%;
+      content: "";
-    vertical-align: bottom;
+      display: inline-block;
+      box-sizing: border-box;
+      width: $line-height-computed;
+      height: $line-height-computed;
+      margin-right: $line-height-computed / 2;
+      animation: spin 1s linear infinite;
+      border: 3px solid rgba($highlight-text, .3);
+      border-radius: 50%;
+      border-top-color: $highlight-text;
+      vertical-align: bottom;
+    }
   }
 }
 
@@ -716,15 +764,14 @@ div.table-list.boards {
   }
 
   .message {
-    border: 1px solid $gray-400;
+    border: 1px solid $bubble-border;
     border-radius: $panel-border-radius;
-    background: $gray-100;
+    background: $bubble-bg;
 
     > h4,
     > p {
       margin-bottom: 0;
       padding: $bubble-padding-vertical $bubble-padding-horizontal;
-      border-bottom: 1px solid mix($gray-400, $gray-100, 50%);
       color: $gray-700;
       font-size: $font-size-list;
 
@@ -738,7 +785,8 @@ div.table-list.boards {
     }
 
     .wiki {
-      padding: $bubble-padding-horizontal;
+      padding: $panel-body-padding;
+      border-top: 1px solid $bubble-border;
       border-radius: 0 0 $panel-border-radius $panel-border-radius;
       background: $body-bg;
     }
@@ -746,13 +794,17 @@ div.table-list.boards {
     .contextual {
       position: relative;
       z-index: 1;
-      margin-top: $padding-small-vertical;
+      padding: ($bubble-padding-vertical - 1px) $bubble-padding-vertical 0 0;
-      margin-right: $bubble-padding-vertical;
 
       a {
-        margin-left: ceil($bubble-padding-vertical / 2);
+        display: inline-block;
       }
     }
+
+    .attachments {
+      padding: $bubble-padding-horizontal;
+      border-top-color: $bubble-border;
+    }
   }
 
   .reply {
@@ -785,12 +837,12 @@ div.table-list.boards {
           margin-top: 1px;
           margin-left: 2px;
           border-width: 6px;
-          border-right-color: $panel-bg;
+          border-right-color: $bubble-bg;
         }
 
         &::before {
           border-width: 7px;
-          border-right-color: $panel-border;
+          border-right-color: $bubble-border;
         }
       }
 
@@ -852,6 +904,8 @@ div.table-list.boards {
 
 .news-article {
   margin-bottom: $line-height-computed;
+  padding-top: $line-height-computed;
+  border-top: 1px solid $panel-border;
 
   header {
     h3 {
@@ -864,8 +918,16 @@ div.table-list.boards {
   }
 }
 
-.author .user {
+.author {
-  font-weight: $font-weight-bold;
+  color: $gray-700;
+
+  .flyout-menu & {
+    color: inherit;
+  }
+
+  .user {
+    font-weight: $font-weight-bold;
+  }
 }
 
 
@@ -899,6 +961,7 @@ div.table-list.boards {
   background: $body-bg;
   color: $panel-color;
   font-family: $font-family-monospace;
+  white-space: pre-wrap;
 }
 
 .diff_out {
@@ -917,6 +980,16 @@ div.table-list.boards {
   }
 }
 
+.text-diff {
+  .diff_out {
+    background: $diff-out-bg;
+  }
+
+  .diff_in {
+    background: $diff-in-bg;
+  }
+}
+
 
 //== Repository view
 //

src/sass/components/_flash.scss

@@ -23,21 +23,21 @@
     line-height: $line-height-computed;
   }
 
-  >:last-child {
+  > :last-child {
     margin-bottom: 0;
   }
 }
 
 @mixin flash($color, $background, $border, $link, $icon) {
-  color: $color;
-  background-color: $background;
   border-color: $border;
+  background-color: $background;
+  color: $color;
 
   @if $icon == "true" {
     $icon: $fa-var-check;
-  } @elseif $icon == "warning" {
+  } @else if $icon == "warning" {
     $icon: $fa-var-warning;
-  } @elseif $icon == "exclamation" {
+  } @else if $icon == "exclamation" {
     $icon: $fa-var-exclamation-circle;
   }
 
@@ -70,6 +70,12 @@
   padding-left: $padding-large-horizontal;
   text-align: center;
 
+  &.nodata-left {
+    &::before {
+      float: left;
+    }
+  }
+
   &::before {
     margin-left: 0;
     float: none;

src/sass/components/_forms.scss

@@ -7,6 +7,15 @@ form {
     padding: $table-condensed-cell-padding;
   }
 
+  fieldset {
+    > button,
+    > input,
+    > select {
+      margin-right: 5px;
+      margin-bottom: $line-height-computed / 2;
+    }
+  }
+
   label {
     line-height: $input-height-base;
     vertical-align: top;
@@ -17,6 +26,8 @@ form {
     }
   }
 
+  span.field label,
+  span.field ~ label,
   .box label {
     line-height: $line-height-base;
 
@@ -26,6 +37,11 @@ form {
     }
   }
 
+  .add-filter label,
+  .filter label {
+    line-height: $input-height-base;
+  }
+
   .contextual > & {
     display: inline-block;
     line-height: $input-height-base;
@@ -76,8 +92,9 @@ input[type="password"] {
   @extend %form-field;
   @include form-control-focus;
   @include placeholder;
-  transition: border-color $transition-time ease-in-out,
+  transition:
-              box-shadow $transition-time ease-in-out;
+    border-color $transition-time ease-in-out,
+    box-shadow $transition-time ease-in-out;
   vertical-align: top;
 
   &[disabled],
@@ -101,12 +118,12 @@ textarea {
 }
 
 input[type="search"] {
-  -webkit-appearance: none;
+  -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
 }
 
 input[type="radio"],
 input[type="checkbox"] {
-  margin: 4px 1px 0 0;
+  margin: 4px 3px 0 5px;
   margin-top: 1px \9; // IE8-9
   line-height: normal;
   vertical-align: top;
@@ -159,7 +176,7 @@ select {
   }
 
   &.bool_cf {
-    width: auto !important; // scss-lint:disable ImportantRule
+    width: auto !important; // stylelint-disable-line declaration-no-important
   }
 }
 
@@ -170,7 +187,7 @@ select {
 
 // Mozilla Firefox
 
-@-moz-document url-prefix() {
+@-moz-document url-prefix("") {
   select {
     &[multiple] {
       padding: 0;
@@ -249,6 +266,7 @@ em.info {
   color: $gray-700;
   font-size: $font-size-small;
   font-style: normal;
+  line-height: $line-height-base;
 }
 
 
@@ -292,6 +310,11 @@ em.info {
       display: block;
       padding-top: $input-padding-vertical + 1px;
       line-height: $line-height-base;
+
+      > input[type="checkbox"],
+      > input[type="radio"] {
+        margin-left: 0;
+      }
     }
   }
 
@@ -335,6 +358,12 @@ em.info {
       float: none;
       text-align: left;
       cursor: pointer;
+
+      > input[type="checkbox"],
+      > input[type="radio"] {
+        margin-left: -$check-input-gutter;
+        float: left;
+      }
     }
 
     &.inline {
@@ -348,11 +377,13 @@ em.info {
     > input[type="checkbox"],
     > input[type="radio"] {
       margin-top: $check-input-margin-vertical;
+      margin-left: 0;
     }
 
     ~ input[type="checkbox"],
     ~ input[type="radio"] {
       margin-top: $check-input-margin-btn-v;
+      margin-left: 0;
     }
   }
 }
@@ -366,23 +397,33 @@ label.inline {
   &:last-child {
     margin-right: 0;
   }
-}
 
-label.inline,
-label.block {
   > input {
     margin-left: -$check-input-gutter;
     float: left;
   }
+
+  input + & {
+    padding-left: 0;
+  }
+}
+
+label.block {
+  display: block;
+  width: auto;
+
+  > input {
+    margin-right: 3px;
+    margin-left: 3px;
+  }
 }
 
 
 //== Hack: align description edit icon with label
 //
 
-label[for=issue_description] + a {
+label[for="issue_description"] + a {
   display: inline-block;
-  margin-top: $input-padding-vertical + 1px;
 
   img {
     vertical-align: middle;
@@ -558,7 +599,7 @@ label[for="closed"] {
 
 #issue_is_private_wrap,
 #all_attributes > p[style] {
-  margin-right: 0 !important; // scss-lint:disable ImportantRule
+  margin-right: 0 !important; // stylelint-disable-line declaration-no-important
   margin-bottom: 0;
   padding-left: 0;
   float: right;
@@ -569,7 +610,7 @@ label[for="closed"] {
   }
 
   label {
-    display: inline-block !important; // scss-lint:disable ImportantRule
+    display: inline-block !important; // stylelint-disable-line declaration-no-important
     margin-right: 0;
     padding-left: 0;
   }
@@ -586,6 +627,10 @@ label[for="closed"] {
   label {
     @include check-list;
   }
+
+  .gravatar {
+    margin-right: $padding-small-vertical;
+  }
 }
 
 #watchers_inputs {
@@ -651,6 +696,7 @@ fieldset#filters {
     }
 
     &.values {
+      min-width: 130px;
       white-space: nowrap;
 
       select {
@@ -700,12 +746,21 @@ fieldset#filters {
     select,
     label,
     .icon,
-    .icon-only {
+    .icon-only,
+    > span > a {
+      line-height: inherit;
       vertical-align: middle;
     }
   }
 }
 
+.query_sort_criteria_count {
+  display: inline-block;
+  min-width: 1em;
+  margin-bottom: $line-height-computed / 4;
+  line-height: $input-height-base;
+}
+
 
 //== Reset label style for trackers selector in custom field editor
 //

src/sass/components/_gantt.scss

@@ -2,25 +2,113 @@
 // Gantt chart
 // --------------------------------------------------
 
+div.gantt_content {
+  overflow: auto;
+}
+
+.controller-gantts form + table,
+table.gantt-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  td {
+    padding: 0;
+    vertical-align: top;
+  }
+}
+
 .gantt_hdr {
   position: absolute;
   top: 0;
   height: 16px;
   overflow: hidden;
-  border: 1px solid $gray-400;
+  border: 1px solid $gray-500;
-  border-left-width: 0;
   text-align: center;
 
+  &[style*="background"] {
+    background: $gray-200 !important; // stylelint-disable-line declaration-no-important
+  }
+
   &.nwday {
-    background-color: $gray-100;
+    background-color: $gray-200;
+    color: $gray-950;
+  }
+
+  #gantt_area & {
+    border-right-width: 1px;
+    border-left-width: 0;
+  }
+
+  .gantt_subjects_container:not(.draw_selected_columns) &,
+  .last_gantt_selected_column & {
+    z-index: 1;
+  }
+}
+
+.gantt_subjects_container .gantt_subjects {
+  z-index: 2;
+}
+
+.gantt_subjects_column {
+  .gantt_hdr {
+    border-left: 1px solid $gray-500 !important; // stylelint-disable-line declaration-no-important
+  }
+
+  + td {
+    padding: 0;
   }
 }
 
 .gantt_subjects {
-  font-size: $font-size-small;
+  .issue-subject {
+    &:hover {
+      background-color: $table-bg-hover;
+    }
 
+    img.icon-gravatar {
+      float: none;
+    }
+  }
+}
+
+.gantt_hdr_selected_column_name {
+  @include text-overflow;
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  transform: translateY(-50%);
+  font-size: $font-size-small;
+}
+
+td.gantt_selected_column {
+  width: 60px;
+}
+
+td.gantt_selected_column .gantt_hdr,
+.gantt_selected_column_container {
+  width: 60px - 1px;
+  border-left-width: 0;
+}
+
+.gantt_subjects {
+  position: relative;
+  z-index: 1;
+  font-size: $font-size-small;
+}
+
+.gantt_selected_column_content {
+  div {
+    box-sizing: border-box;
+    padding-right: $table-condensed-cell-padding;
+    padding-left: $table-condensed-cell-padding;
+  }
+}
+
+.gantt_subjects,
+.gantt_selected_column_content {
   div {
     @include text-overflow;
+    width: 100%;
     height: 16px;
     line-height: 16px;
   }
@@ -118,12 +206,20 @@
 .version-behind-schedule,
 .issue-behind-schedule {
   color: $brand-warning;
+
+  .context-menu-selection & {
+    color: $brand-text;
+  }
 }
 
 .version-overdue,
 .issue-overdue,
 .project-overdue {
   color: $brand-danger;
+
+  .context-menu-selection & {
+    color: $brand-text;
+  }
 }
 
 
@@ -137,20 +233,20 @@
   &: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;
+    border-radius: $border-radius-small;
     background-color: $tooltip-bg;
     color: $tooltip-text;
     font-size: $font-size-small;
@@ -158,9 +254,9 @@
   }
 
   @if $sidebar-position == "left" {
-    tr > td:last-child & {
+    .list & {
-      .tip {
+      span.tip {
-        right: 2px;
+        right: 0;
         left: auto;
       }
     }

src/sass/components/_gravatar.scss

@@ -3,6 +3,8 @@
 // --------------------------------------------------
 
 img.gravatar {
+  position: relative;
+  top: -.15em;
   overflow: hidden;
   border-radius: $border-radius-large;
   line-height: 1;
@@ -11,8 +13,6 @@ img.gravatar {
   h2 &,
   h3 &,
   h4 & {
-    position: relative;
-    top: -1px;
     margin-right: 5px;
   }
 }
@@ -22,10 +22,7 @@ img.gravatar {
 //
 
 .username img.gravatar {
-  position: relative;
-  top: 1px;
   margin-right: .5em;
-  vertical-align: top;
 }
 
 //== Gravatar

src/sass/components/_icons.scss

@@ -17,6 +17,120 @@
   }
 }
 
+$icon-map: (
+  icon-add:                     $fa-var-plus-square,
+  icon-edit:                    $fa-var-pencil,
+  icon-copy:                    $fa-var-copy,
+  icon-duplicate:               $fa-var-clipboard,
+  icon-del:                     $fa-var-trash,
+  icon-move:                    $fa-var-arrows,
+  icon-save:                    $fa-var-save,
+  icon-download:                $fa-var-download,
+  icon-cancel:                  $fa-var-ban,
+  icon-multiple:                $fa-var-plus-circle,
+  icon-folder:                  $fa-var-folder,
+  icon-package:                 $fa-var-cube,
+  icon-user:                    $fa-var-user,
+  icon-project:                 $fa-var-cube,
+  icon-projects:                $fa-var-cubes,
+  icon-help:                    $fa-var-info-circle,
+  icon-attachment:              $fa-var-paperclip,
+  icon-history:                 $fa-var-history,
+  icon-time-entry:              $fa-var-clock-o,
+  icon-time:                    $fa-var-clock-o,
+  icon-time-add:                $fa-var-clock-o,
+  icon-stats:                   $fa-var-line-chart,
+  icon-warning:                 $fa-var-warning,
+  icon-error:                   $fa-var-exclamation,
+  icon-fav:                     $fa-var-star,
+  icon-fav-off:                 $fa-var-star-o,
+  icon-heart:                   $fa-var-heart,
+  icon-heart-off:               $fa-var-heart-o,
+  icon-reload:                  $fa-var-refresh,
+  icon-locked:                  $fa-var-lock,
+  icon-lock:                    $fa-var-lock,
+  icon-unlock:                  $fa-var-unlock,
+  icon-checked:                 $fa-var-check,
+  icon-details:                 $fa-var-search-plus,
+  icon-report:                  $fa-var-pie-chart,
+  icon-comments:                $fa-var-comment,
+  icon-comment:                 $fa-var-comment,
+  icon-summary:                 $fa-var-file-text,
+  icon-server-authentication:   $fa-var-key,
+  icon-issue:                   $fa-var-ticket,
+  icon-zoom-in:                 $fa-var-search-plus,
+  icon-zoom-out:                $fa-var-search-minus,
+  icon-magnifier:               $fa-var-search,
+  icon-passwd:                  $fa-var-key,
+  icon-arrow-right:             $fa-var-arrow-right,
+  icon-test:                    $fa-var-arrow-circle-right,
+  icon-sticky:                  $fa-var-thumb-tack,
+  icon-email:                   $fa-var-envelope,
+  icon-email-disabled:          $fa-var-envelope-o,
+  icon-email-add:               $fa-var-envelope,
+  icon-ok:                      $fa-var-check,
+  icon-not-ok:                  $fa-var-times,
+  icon-link-break:              $fa-var-chain-broken,
+  icon-list:                    $fa-var-list-ul,
+  icon-close:                   $fa-var-times-circle,
+  icon-settings:                $fa-var-cog,
+  icon-group:                   $fa-var-users,
+  icon-groupnonmember:          $fa-var-users,
+  icon-groupanonymous:          $fa-var-users,
+  icon-roles:                   $fa-var-eye,
+  icon-issue-edit:              $fa-var-edit,
+  icon-workflows:               $fa-var-sitemap,
+  icon-custom-fields:           $fa-var-edit,
+  icon-plugins:                 $fa-var-puzzle-piece,
+  icon-news:                    $fa-var-newspaper-o,
+  icon-issue-closed:            $fa-var-ticket,
+  icon-issue-note:              $fa-var-comment,
+  icon-changeset:               $fa-var-upload,
+  icon-message:                 $fa-var-comment,
+  icon-reply:                   $fa-var-comment-o,
+  icon-wiki-page:               $fa-var-file-text-o,
+  icon-document:                $fa-var-file-text,
+  icon-add-bullet:              $fa-var-plus-circle,
+  icon-shared:                  $fa-var-link,
+  icon-actions:                 $fa-var-ellipsis-h,
+  icon-sort-handle:             $fa-var-arrows-v,
+  icon-expended:                $fa-var-chevron-down,
+  icon-collapsed:               $fa-var-chevron-right,
+  icon-bookmark:                $fa-var-bookmark,
+  icon-bookmark-off:            $fa-var-bookmark-o,
+  icon-sorted-asc:              $fa-var-sort-amount-asc,
+  icon-sorted-desc:             $fa-var-sort-amount-desc,
+  icon-toggle-plus:             $fa-var-plus-square,
+  icon-toggle-minus:            $fa-var-minus-square,
+  icon-clear-query:             $fa-var-times,
+  icon-import:                  $fa-var-cloud-upload,
+
+  // Plugin icons
+  icon-call:                    $fa-var-phone,
+  icon-contact:                 $fa-var-vcard,
+  icon-erase:                   $fa-var-eraser,
+  icon-facebook:                $fa-var-facebook-square,
+  icon-fullscreen:              $fa-var-arrows-alt,
+  icon-linkedin:                $fa-var-linkedin-square,
+  icon-meeting:                 $fa-var-calendar-check-o,
+  icon-merge:                   $fa-var-code-fork,
+  icon-money-dollar:            $fa-var-usd,
+  icon-money-euro:              $fa-var-eur,
+  icon-money-pound:             $fa-var-gbp,
+  icon-money-yen:               $fa-var-jpy,
+  icon-move-bottom:             $fa-var-angle-double-down,
+  icon-move-down:               $fa-var-angle-down,
+  icon-move-top:                $fa-var-angle-double-up,
+  icon-move-up:                 $fa-var-angle-up,
+  icon-phone:                   $fa-var-phone,
+  icon-skype:                   $fa-var-skype,
+  icon-tags:                    $fa-var-tags,
+  icon-twitter:                 $fa-var-twitter-square,
+  icon-vcard:                   $fa-var-vcard,
+  banner-icon-edit:             $fa-var-edit,
+  banner-icon-off:              $fa-var-times,
+);
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);
@@ -35,124 +149,68 @@ table.list .buttons > a::before {
 //== Buttons icons
 //
 
-.icon {
+.icon,
+.icon-only:not(.toggle-multiselect) {
   @extend %fa-icon;
-  padding-left: 20px;
+  padding-left: $icon-width;
   background-repeat: no-repeat;
   background-position: 0% 50%;
 
   &::before {
-    margin-left: -20px;
+    margin-left: -$icon-width;
   }
 }
 
 .icon-only {
-  @extend %fa-icon;
+  display: inline-block;
-  font-size: 0;
+  width: 0;
+  overflow: hidden;
+  vertical-align: top;
   white-space: nowrap;
 
-  @at-root a#{&} {
-    // scss-lint:disable ImportantRule
-    display: inline;
-    width: auto !important;
-    height: auto !important;
-    padding-left: 0 !important;
-    font-size: 0 !important;
-  }
-
   &::before {
-    font-size: $font-size-base;
+    width: $icon-width;
+    text-align: center;
   }
 }
 
-.icon-add::before                   { content: $fa-var-plus-square; }
+// A empty icon should behave more like icon-only
-.icon-edit::before                  { content: $fa-var-pencil; }
+a.icon:empty {
-.icon-copy::before                  { content: $fa-var-copy; }
+  display: inline-block;
-.icon-duplicate::before             { content: $fa-var-clipboard; }
+}
-.icon-del::before                   { content: $fa-var-trash; }
-.icon-move::before                  { content: $fa-var-arrows; }
-.icon-save::before                  { content: $fa-var-save; }
-.icon-download::before              { content: $fa-var-download; }
-.icon-cancel::before                { content: $fa-var-ban; }
-.icon-multiple::before              { content: $fa-var-plus-circle; }
-.icon-folder::before                { content: $fa-var-folder; }
-.open .icon-folder::before          { content: $fa-var-folder-open; }
-.icon-package::before               { content: $fa-var-cube; }
-.icon-user::before                  { content: $fa-var-user; }
-.icon-project::before               { content: $fa-var-cube; }
-.icon-projects::before              { content: $fa-var-cubes; }
-.icon-help::before                  { content: $fa-var-info-circle; }
-.icon-attachment::before            { content: $fa-var-paperclip; }
-.icon-history::before               { content: $fa-var-history; }
-.icon-time-entry::before            { content: $fa-var-clock-o; }
-.icon-time::before                  { content: $fa-var-clock-o; }
-.icon-time-add::before              { content: $fa-var-clock-o; }
-.icon-stats::before                 { content: $fa-var-line-chart; }
-.icon-warning::before               { content: $fa-var-warning; }
-.icon-error::before                 { content: $fa-var-exclamation; }
-.icon-fav::before                   { content: $fa-var-star; color: $orange; }
-.icon-fav-off::before               { content: $fa-var-star-o; }
-.icon-heart::before                 { content: $fa-var-heart; color: $pink; }
-.icon-heart-off::before             { content: $fa-var-heart-o; }
-.icon-reload::before                { content: $fa-var-refresh; }
-.icon-locked::before                { content: $fa-var-lock; }
-.icon-lock::before                  { content: $fa-var-lock; }
-.icon-unlock::before                { content: $fa-var-unlock; }
-.icon-checked::before               { content: $fa-var-check; }
-.icon-details::before               { content: $fa-var-search-plus; }
-.icon-report::before                { content: $fa-var-pie-chart; }
-.icon-comments::before              { content: $fa-var-comment; }
-.icon-comment::before               { content: $fa-var-comment; }
-.icon-summary::before               { content: $fa-var-file-text; }
-.icon-server-authentication::before { content: $fa-var-key; }
-.icon-issue::before                 { content: $fa-var-ticket; }
-.icon-zoom-in::before               { content: $fa-var-search-plus; }
-.icon-zoom-out::before              { content: $fa-var-search-minus; }
-.icon-passwd::before                { content: $fa-var-key; }
-.icon-test::before                  { content: $fa-var-arrow-circle-right; }
-.icon-phone::before                 { content: $fa-var-phone; }
-.icon-skype::before                 { content: $fa-var-skype; }
-.icon-facebook::before              { content: $fa-var-facebook-square; }
-.icon-linkedin::before              { content: $fa-var-linkedin-square; }
-.icon-twitter::before               { content: $fa-var-twitter-square; }
-.icon-magnifier::before             { content: $fa-var-search; }
-.icon-email::before                 { content: $fa-var-envelope; }
-.icon-email-disabled::before        { content: $fa-var-envelope-o; }
-.icon-email-add::before             { content: $fa-var-envelope; }
-.icon-move-up::before               { content: $fa-var-angle-up; }
-.icon-move-top::before              { content: $fa-var-angle-double-up; }
-.icon-move-down::before             { content: $fa-var-angle-down; }
-.icon-move-bottom::before           { content: $fa-var-angle-double-down; }
-.icon-ok::before                    { content: $fa-var-check; }
-.icon-not-ok::before                { content: $fa-var-times; }
-.icon-link-break::before            { content: $fa-var-chain-broken; }
-.icon-list::before                  { content: $fa-var-list-ul; }
-.icon-sticky::before                { content: $fa-var-thumb-tack; }
-.icon-arrow-right::before           { content: $fa-var-arrow-right; }
-.icon-close::before                 { content: $fa-var-times-circle; }
-.icon-close:hover::before           { content: $fa-var-times-circle-o; }
-.icon-settings::before              { content: $fa-var-cog; }
-.icon-group::before                 { content: $fa-var-users; }
-.icon-groupnonmember::before        { content: $fa-var-users; }
-.icon-groupanonymous::before        { content: $fa-var-users; }
-.icon-roles::before                 { content: $fa-var-eye; }
-.icon-issue-edit::before            { content: $fa-var-edit; }
-.icon-workflows::before             { content: $fa-var-sitemap; }
-.icon-custom-fields::before         { content: $fa-var-edit; }
-.icon-plugins::before               { content: $fa-var-puzzle-piece; }
-.icon-news::before                  { content: $fa-var-newspaper-o; }
-.icon-issue-closed::before          { content: $fa-var-ticket; }
-.icon-issue-note::before            { content: $fa-var-comment; }
-.icon-changeset::before             { content: $fa-var-upload; }
-.icon-message::before               { content: $fa-var-comment; }
-.icon-reply::before                 { content: $fa-var-comment-o; }
-.icon-wiki-page::before             { content: $fa-var-file-text-o; }
-.icon-document::before              { content: $fa-var-file-text; }
-.icon-project::before               { content: $fa-var-cube; }
-.icon-add-bullet::before            { content: $fa-var-plus-circle; }
-.icon-shared::before                { content: $fa-var-link; }
-.icon-actions::before               { content: $fa-var-ellipsis-h; }
 
+$icons-selector: ();
+@each $class, $icon in $icon-map {
+  $icons-selector: append($icons-selector, unquote(".#{$class}"), "comma");
+
+  .#{$class} {
+    &::before {
+      content: $icon;
+
+      @if $class == "icon-fav" {
+        color: $orange;
+      } @else if $class == "icon-heart" {
+        color: $pink;
+      }
+    }
+
+    @if $class == "icon-close" {
+      &:hover::before {
+        content: $fa-var-times-circle-o;
+      }
+    } @else if $class == "icon-folder" {
+      .open &::before {
+        content: $fa-var-folder-open;
+      }
+    }
+  }
+}
+
+#{$icons-selector} {
+  &.icon {
+    background-image: none;
+  }
+}
 
 //== Checkbox toggler
 //
@@ -195,7 +253,7 @@ a.icon-del {
 .icon-folder,
 .icon-file {
   &::before {
-    width: 16px;
+    width: $icon-width;
     text-align: center;
   }
 }
@@ -240,6 +298,25 @@ a.icon-del {
   }
 }
 
+.icon-expended,
+.icon-collapsed {
+  &::before {
+    text-align: center;
+  }
+
+  &.icon {
+    padding-left: $icon-width;
+  }
+
+  &.expander {
+    background-image: none;
+  }
+}
+
+.icon-zoom-in + .icon-zoom-out {
+  margin-left: $padding-small-vertical;
+}
+
 
 //== Administration menu sections
 //
@@ -247,13 +324,6 @@ a.icon-del {
 %admin-icon {
   @extend %fa-icon;
 
-  &::before {
-    width: 20px;
-    margin-left: -(5px + 20px);
-    color: $gray-700;
-    text-align: center;
-  }
-
   &:hover::before {
     color: $gray-900;
   }
@@ -266,13 +336,23 @@ a.icon-del {
 #admin-menu {
   #admin-index > & {
     a {
-      padding-left: 5px + 20px;
+      padding-left: 5px + $icon-width;
     }
   }
 
   li {
     > a {
-      padding-left: $sidebar-padding-horizontal + 5px + 20px;
+      padding-left: $sidebar-padding-horizontal + 5px + $icon-width;
+
+      &::before {
+        display: inline-block;
+        width: $icon-width;
+        margin: 0;
+        margin-left: -(5px + $icon-width);
+        padding: 0;
+        color: $gray-700;
+        text-align: center;
+      }
     }
   }
 
@@ -369,8 +449,6 @@ a.icon-del {
 
   &::before {
     content: $fa-var-arrows-v;
-    width: 16px;
-    margin: 0;
   }
 
   &.ajax-loading {
@@ -397,8 +475,9 @@ div.projects h3 {
   color: $gray-900;
 
   &::before {
-    width: 1em;
+    width: $icon-width;
-    margin-right: .5em;
+    margin-right: $padding-small-vertical;
+    transform: translateY(-.1em);
     color: $gray-700;
     text-align: center;
   }
@@ -407,7 +486,7 @@ div.projects h3 {
 h3.version::before      { content: $fa-var-cube; }
 h3.comments::before     { content: $fa-var-comments; }
 div.issues h3::before   { content: $fa-var-ticket; }
-div.members h3::before  { content: $fa-var-user; }
+div.members h3::before  { content: $fa-var-users; }
 div.news h3::before     { content: $fa-var-newspaper-o; }
 div.projects h3::before { content: $fa-var-cubes; }
 
@@ -519,6 +598,11 @@ dt {
 
 .sort {
   @extend %fa-icon-after;
+  padding-left: 0;
+
+  &::before {
+    content: none;
+  }
 
   &::after {
     margin-left: .2em;
@@ -577,36 +661,42 @@ em.info.error {
   }
 }
 
-.message .contextual {
+.message {
-  a {
+  .contextual {
-    @extend %fa-icon;
+    a {
-    opacity: .7;
+      @extend %fa-icon;
+      opacity: .7;
 
-    &:hover,
+      &:hover,
-    &:focus {
+      &:focus {
-      opacity: 1;
+        opacity: 1;
-    }
+      }
 
-    &:nth-child(1) {
+      img {
-      &::before {
+        display: none;
-        content: $fa-var-comment;
       }
     }
+  }
 
-    &:nth-child(2) {
+  > .contextual {
-      &::before {
+    a {
-        content: $fa-var-pencil;
+      &:nth-child(1) {
+        &::before {
+          content: $fa-var-comment;
+        }
       }
-    }
 
-    &:nth-child(3) {
+      &:nth-child(2) {
-      &::before {
+        &::before {
-        content: $fa-var-trash;
+          content: $fa-var-pencil;
+        }
       }
-    }
 
-    img {
+      &:nth-child(3) {
-      display: none;
+        &::before {
+          content: $fa-var-trash;
+        }
+      }
     }
   }
 }

src/sass/components/_image-base64.scss

@@ -4,5 +4,5 @@
 
 // ACI = AutoComplete Indicator
 %image-aci {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAKBAMAAAAnY0GXAAAAD1BMVEUAAACzs7Ozs7Ozs7Ozs7NJvZFvAAAABHRSTlMA5kpJG2qUMwAAABtJREFUCNdjIBMYCkMRDIg4QhBuAUUhKCIPAAAlaQNk5qF21gAAAABJRU5ErkJggg==);
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAKBAMAAAAnY0GXAAAAD1BMVEUAAACzs7Ozs7Ozs7Ozs7NJvZFvAAAABHRSTlMA5kpJG2qUMwAAABtJREFUCNdjIBMYCkMRDIg4QhBuAUUhKCIPAAAlaQNk5qF21gAAAABJRU5ErkJggg==");
 }

src/sass/components/_issue.scss

@@ -23,6 +23,7 @@
         position: relative;
 
         > img.gravatar {
+          top: 0;
           width: $issue-gravatar-size;
           height: $issue-gravatar-size;
           margin-right: 10px;
@@ -42,6 +43,7 @@
       }
 
       > img.gravatar {
+        top: 0;
         width: $issue-gravatar-size;
         height: $issue-gravatar-size;
         margin-right: 10px;
@@ -86,7 +88,8 @@
       margin-bottom: $line-height-computed;
     }
 
-    > hr {
+    > hr,
+    .attribute > hr {
       @if $clean-issues {
         margin: $issue-padding 0;
       } @else {
@@ -124,7 +127,42 @@
     }
   }
 
-  .attributes {
+  @if $color-status {
+    .attributes td.status,
+    .attributes .attribute.status .value {
+      display: inline-block;
+      width: auto;
+      min-width: 1em;
+      margin-top: $issue-attribute-padding-v;
+      padding: 1px $table-cell-padding;
+      border-radius: $border-radius-base;
+      background-color: $status-default-bg;
+      color: $status-default-color;
+      font-size: $font-size-small;
+      font-weight: $font-weight-bold;
+      text-align: center;
+      text-transform: uppercase;
+    }
+
+    @each $status, $status-colors in $status-colors-map {
+      &.#{$status} {
+        .attributes td.status,
+        .attributes .attribute.status .value {
+          background-color: map-get($status-colors, background);
+          color: map-get($status-colors, color);
+        }
+      }
+    }
+  }
+
+  @if $priority-icon {
+    .attributes td.priority,
+    .attribute.priority .value {
+      @include priority-icon-base;
+    }
+  }
+
+  table.attributes {
     width: 100%;
 
     th,
@@ -146,71 +184,70 @@
     }
 
     @media screen and (min-width: $screen-md-min) {
-      > tbody > tr {
-        > th,
-        > td {
-          width: 25%;
-        }
-      }
-    }
-
-    @media screen and (min-width: $screen-lg-min) {
-      width: auto;
-
       > tbody > tr {
         > th {
-          width: 14em;
+          width: $label-width;
         }
 
         > td {
+          min-width: $label-width;
+        }
+      }
+    }
+  }
+
+  div.attributes {
+    @if $css-grid-layout {
+      display: grid;
+      grid-gap: 0 $padding-side;
+      grid-template-columns: auto;
+
+      @media screen and (min-width: $screen-lg-min) {
+        grid-template-columns: repeat(2, minmax(auto, max-content));
+
+        .attribute .value {
+          min-width: $label-width;
+        }
+      }
+
+      .splitcontent {
+        display: contents;
+
+        &::after {
+          content: none;
+        }
+      }
+
+      .splitcontentleft {
+        width: auto;
+        padding-right: 0;
+        padding-left: 0;
+        float: none;
+      }
+    } @else {
+      @media screen and (min-width: $screen-lg-min) {
+        .splitcontentleft {
           width: auto;
-          min-width: 16em;
+        }
+
+        .attribute .value {
+          min-width: $label-width;
         }
       }
     }
   }
 
-  @if $color-status {
+  .splitcontent {
-    .attributes td.status,
+    .attribute {
-    .attribute.status .value {
+      padding-left: $label-width;
-      display: inline-block;
-      width: auto;
-      min-width: 1em;
-      margin-top: $issue-attribute-padding-v;
-      padding: 1px $table-cell-padding;
-      border-radius: $border-radius-base;
-      background-color: $status-default-bg;
-      color: $status-default-color;
-      font-size: $font-size-small;
-      font-weight: $font-weight-bold;
-      text-align: center;
-      text-transform: uppercase;
-    }
 
-    @each $status, $status-colors in $status-colors-map {
+      .label {
-      &.#{$status} {
+        width: $label-width;
-        .attributes td.status,
+        margin-left: -$label-width;
-        .attribute.status .value {
-          background-color: map-get($status-colors, background);
-          color: map-get($status-colors, color);
-        }
       }
     }
   }
 
-  @if $priority-icon {
-    .attributes td.priority,
-    .attribute.priority .value {
-      @include priority-icon-base;
-    }
-  }
-
-  .splitcontentleft {
-    @media screen and (min-width: $screen-lg-min) {
-      width: auto;
-    }
-  }
-
   .attribute {
     @extend %clearfix;
 
@@ -220,21 +257,20 @@
     }
 
     .label {
-      width: 25%;
+      box-sizing: border-box;
       float: left;
       color: $gray-700;
-
-      @media screen and (min-width: $screen-lg-min) {
-        width: 14em;
-      }
     }
 
     .value {
       color: $gray-950;
 
-      @media screen and (min-width: $screen-lg-min) {
+      &:empty::after {
-        width: auto;
+        content: "-";
-        min-width: 14em + 16em;
+      }
+
+      *:last-child {
+        margin-bottom: 0;
       }
     }
   }
@@ -244,17 +280,28 @@
   }
 
   div.attachments {
-    margin: -$issue-padding;
+    margin: 0;
-    padding: $issue-padding;
+    padding: 0;
     border-top: 0;
   }
+
+  div.description + div.attachments {
+    margin: $issue-padding (-$issue-padding) (-$issue-padding);
+    padding: $issue-padding;
+    border-top: 1px solid $issue-border;
+  }
+
+  // Restore margin below buttons in reverse chronological mode
+  + div[style] + .contextual {
+    margin-bottom: $line-height-computed;
+  }
 }
 
 div.fileover {
   background-color: $highlight-bg;
 }
 
-div.attachments {
+div.attachments:not(.box) {
   padding: $line-height-computed 0;
   border-top: 1px solid $issue-border;
 
@@ -315,6 +362,7 @@ div.thumbnails {
     top: 0;
     margin: 3px;
     border-radius: $border-radius-base - 1;
+    vertical-align: middle;
   }
 }
 
@@ -327,6 +375,10 @@ div.thumbnails {
   .issues {
     margin: ($line-height-computed / 2) 0 0;
 
+    tr {
+      background-color: transparent;
+    }
+
     tr:last-child > td {
       border-bottom: 0 none;
     }
@@ -335,23 +387,31 @@ div.thumbnails {
       display: none;
     }
 
-    td.subject {
+    td.done_ratio {
-      padding-left: 0;
+      width: 80px;
     }
 
     td.buttons {
+      width: 3em;
       vertical-align: middle;
+
+      a:not(:first-child) {
+        margin-left: 2px;
+      }
     }
   }
 }
 
-#relations {
+#trackers_description {
-  td.checkbox {
+  display: none;
-    display: none;
+
+  dt {
+    margin: 0 0 ($line-height-computed / 4);
   }
 
-  td.buttons {
+  dd {
-    padding: 0;
+    margin-right: 0;
+    margin-left: 0;
   }
 }
 
@@ -367,9 +427,13 @@ div.thumbnails {
   }
 }
 
-#history {
+#update > form {
-  overflow: auto;
+  margin-bottom: $line-height-computed;
+  padding-bottom: $line-height-computed;
+  border-bottom: 1px solid $issue-border;
+}
 
+#history {
   > .tabs {
     margin-bottom: $line-height-computed + 2px * 2;
   }
@@ -401,64 +465,87 @@ div.thumbnails {
 
 .journal {
   position: relative;
-  margin-bottom: $line-height-computed + 2px * 2;
+  margin-bottom: $line-height-computed;
+  border: 1px solid $bubble-border;
+  border-radius: $panel-border-radius;
 
   @if $use-gravatars {
     margin-left: $bubble-gravatar-size + $bubble-gravatar-space;
   }
 
-  &::before {
+  &.changeset {
-    content: "";
+    h4 + p {
-    display: block;
+      margin-bottom: 0;
-    position: absolute;
+      padding-bottom: $bubble-padding-vertical;
-    z-index: -1;
+      background-color: $bubble-bg;
-    top: -($line-height-computed + 2px);
+      font-size: $font-size-list;
-    left: 22px;
-    width: 4px;
-    height: $line-height-computed;
-    background-color: darken($body-bg, 5%);
-  }
 
-  .tabs + &::before {
+      > a:first-child {
-    display: none;
+        font-family: $font-family-monospace;
+        font-weight: $font-weight-bold;
+      }
+    }
   }
 
   > div {
-    border: 1px solid $issue-border;
-    border-radius: $panel-border-radius;
-
     &:target {
-      border-color: darken($issue-border, 25%);
+      $border: $bubble-target-border;
+      $shadow: rgba($bubble-target-border, $bubble-target-shadow-alpha);
+      position: relative;
+      margin-top: -($responsive-header-height + 4px);
+      padding-top: ($responsive-header-height + 4px);
+
+      &::before {
+        content: "";
+        display: block;
+        position: absolute;
+        top: ($responsive-header-height + 4px);
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border-radius: $panel-border-radius - 1px;
+        box-shadow: 0 0 0 1px $border, 0 0 0 4px $shadow;
+        pointer-events: none;
+      }
 
       @if $use-gravatars {
-        h4::before {
+        > h4::before {
-          border-right-color: darken($issue-border, 25%);
+          border-right-color: $border;
+          filter: drop-shadow(-4px 0 0 $shadow);
+        }
+      }
+
+      @media screen and (min-width: $redmine-responsive-min) {
+        margin-top: -$line-height-computed;
+        padding-top: $line-height-computed;
+
+        &::before {
+          top: $line-height-computed;
         }
       }
     }
   }
 
   // For Redmine 4.0+
-  > div > .contextual {
+  > div > .contextual,
+  > .contextual {
     position: relative;
     z-index: 1;
     margin: 0;
     padding: $bubble-padding-vertical $bubble-padding-horizontal;
     font-size: $font-size-list;
 
-    > .journal-actions {
+    a {
-      padding-right: $issue-attribute-padding-h;
+      opacity: $icon-opacity;
 
-      > a {
+      &:hover {
-        opacity: $icon-opacity;
+        opacity: $icon-hover-opacity;
-
-        &:hover {
-          opacity: $icon-hover-opacity;
-        }
       }
     }
 
     > a.journal-link {
+      padding-left: $issue-attribute-padding-h;
+      opacity: 1;
       color: $gray-700;
 
       &::before {
@@ -467,13 +554,15 @@ div.thumbnails {
     }
   }
 
-  > div > h4 {
+  > div > h4,
+  > h4 {
     margin: 0;
     padding: $bubble-padding-vertical $bubble-padding-horizontal;
     border-radius: $panel-border-radius $panel-border-radius 0 0;
-    background-color: $issue-bg;
+    background-color: $bubble-bg;
     color: $gray-700;
     font-size: $font-size-list;
+    font-weight: $font-weight-normal;
 
     a {
       color: $gray-900;
@@ -489,7 +578,8 @@ div.thumbnails {
   }
 
   @if $use-gravatars {
-    > div > h4 {
+    > div > h4,
+    > h4 {
       position: relative;
 
       &::before,
@@ -511,15 +601,16 @@ div.thumbnails {
         margin-top: 1px;
         margin-left: 2px;
         border-width: 6px;
-        border-right-color: $issue-bg;
+        border-right-color: $bubble-bg;
       }
 
       &::before {
         border-width: 7px;
-        border-right-color: $issue-border;
+        border-right-color: $bubble-border;
       }
 
       > .gravatar {
+        top: 0;
         margin-top: $line-height-computed - $bubble-gravatar-size;
         margin-left: -($bubble-gravatar-size + $bubble-gravatar-space + $bubble-padding-horizontal + 1px);
         float: left;
@@ -527,35 +618,27 @@ div.thumbnails {
     }
   }
 
+  > p {
+    padding-right: $bubble-padding-horizontal;
+    padding-left: $bubble-padding-horizontal;
+
+    &:empty {
+      margin-bottom: 0;
+    }
+  }
+
+  form,
+  .wiki,
+  .details {
+    border-top: 1px solid $bubble-border;
+  }
+
   .details {
     margin: 0;
     padding: $bubble-padding-vertical 0;
-    padding-left: $bubble-padding-horizontal * 2.5;
+    padding-left: $bubble-padding-horizontal + 20px;
-    list-style: none;
-    border-top: 1px solid mix($body-bg, $issue-border, 50%);
     font-size: $font-size-list;
 
-    li {
-      position: relative;
-      margin-bottom: $bubble-padding-vertical / 2;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      &::before {
-        content: "";
-        display: block;
-        position: absolute;
-        top: 5px;
-        left: -($bubble-padding-horizontal + 6px / 2);
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background-color: $gray-600;
-      }
-    }
-
     img {
       margin: 0 0 -3px 4px;
     }
@@ -570,15 +653,13 @@ div.thumbnails {
     }
   }
 
-  .wiki,
+  .wiki {
-  form {
     padding: $issue-padding;
-    border-top: 1px solid $issue-border;
   }
 
   form {
-    padding-top: 5px;
+    padding: $bubble-padding-vertical $bubble-padding-horizontal $bubble-padding-horizontal;
-    background-color: $gray-100;
+    background-color: $bubble-bg;
 
     > p {
       margin-bottom: $issue-padding;
@@ -588,6 +669,12 @@ div.thumbnails {
       }
     }
 
+    > label {
+      display: inline-block;
+      margin-bottom: $line-height-computed / 2;
+      line-height: $line-height-base;
+    }
+
     > .wiki {
       margin: 0 (-$issue-padding) (-$issue-padding);
       padding: 0;
@@ -622,12 +709,10 @@ div.thumbnails {
 }
 
 .private-notes {
-  > div {
+  border-left-color: $brand-warning;
-    border-left-color: $brand-warning;
 
-    h4::before {
+  > div > h4::before {
-      border-right-color: $brand-warning;
+    border-right-color: $brand-warning;
-    }
   }
 }
 
@@ -655,21 +740,29 @@ span.private {
 
   @media screen and (min-width: $screen-md-min) {
     width: 45%;
-    margin-left: $padding-side;
     float: right;
+
+    + #history {
+      margin-right: 45%;
+      padding-right: $padding-side;
+    }
   }
 
   @media screen and (min-width: $screen-lg-min) {
     width: 33%;
-    min-width: 28em;
+
+    + #history {
+      margin-right: 33%;
+    }
   }
 
   div.changeset {
     margin-top: $line-height-computed / 2 + 2px * 2;
+    padding: 0;
     overflow: hidden;
-    border: 1px solid $issue-border;
+    border: 1px solid $bubble-border;
     border-radius: $panel-border-radius;
-    background-color: $issue-bg;
+    background-color: $bubble-bg;
     font-size: $font-size-list;
 
     &:first-of-type {
@@ -682,7 +775,7 @@ span.private {
       padding: $padding-base-vertical $padding-base-horizontal;
       color: $gray-700;
 
-      > a {
+      > a:first-child {
         font-family: $font-family-monospace;
         font-weight: $font-weight-bold;
       }
@@ -702,7 +795,7 @@ span.private {
 
     > .wiki {
       padding: $padding-base-vertical $padding-base-horizontal;
-      border-top: 1px solid mix($body-bg, $issue-border, 50%);
+      border-top: 1px solid $bubble-border;
       background-color: $body-bg;
     }
   }

src/sass/components/_jquery-ui.scss

@@ -127,6 +127,7 @@
 }
 
 .ui-sortable-helper {
+  background-color: $body-bg;
   @include nice-shadow(4);
 }
 
@@ -138,6 +139,23 @@
   @include nice-shadow(2);
   padding: 3px;
   border-radius: $panel-border-radius;
+
+  .ui-menu-item {
+    &.ui-state-focus,
+    &.ui-state-active {
+      border-color: $pagination-hover-border;
+      background-color: $pagination-hover-bg;
+      color: $pagination-hover-color;
+
+      a {
+        color: $pagination-hover-color;
+      }
+
+      .ui-icon {
+        background-image: url("../../../stylesheets/jquery/images/ui-icons_222222_256x240.png");
+      }
+    }
+  }
 }
 
 .ui-menu-item {
@@ -298,3 +316,17 @@ img.ui-datepicker-trigger {
     }
   }
 }
+
+.ui-tooltip {
+  @include nice-shadow(1);
+  padding: $padding-small-vertical $padding-small-horizontal;
+  border: 0 none;
+  background: $black;
+  color: $white;
+  font-size: $font-size-small-px;
+  pointer-events: none;
+
+  &.qtip {
+    pointer-events: initial;
+  }
+}

src/sass/components/_jstoolbar.scss

@@ -74,7 +74,7 @@
   }
 }
 
-.jstElements {
+div.jstElements {
   @extend %clearfix;
   line-height: normal;
 
@@ -98,20 +98,13 @@
   button {
     margin-right: 2px;
     margin-bottom: 4px;
-    box-shadow: none;
-    vertical-align: top;
-  }
-}
-
-.jstElements {
-  %jstb-icon {
-    @include fa-icon;
     padding: 0;
     border: 0;
     opacity: 1;
-    background: transparent;
+    background-color: transparent;
-    background-image: none;
+    box-shadow: none;
     color: $gray-800;
+    vertical-align: top;
 
     &::before {
       text-align: center;
@@ -124,6 +117,12 @@
     }
   }
 
+  %jstb-icon {
+    @include fa-icon;
+    background: transparent;
+    background-image: none;
+  }
+
   .jstb_strong {
     @extend %jstb-icon;
 
@@ -229,6 +228,12 @@
     &::before { content: $fa-var-code; }
   }
 
+  .jstb_table {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-table; }
+  }
+
   button.jstb_help {
     @extend %jstb-icon;
     color: $link-color;

src/sass/components/_list.scss

@@ -25,9 +25,16 @@ table.list {
     padding: $table-cell-padding;
     border: 2px solid $table-border-color;
     border-width: $table-list-header-border;
+    background-color: $table-list-header-bg;
     color: $gray-700;
     vertical-align: bottom;
 
+    @if $table-list-header-bg == $body-bg {
+      @at-root .box & {
+        background-color: $panel-bg;
+      }
+    }
+
     a {
       color: $gray-900;
     }
@@ -45,17 +52,21 @@ table.list {
     vertical-align: top;
 
     &.icon {
-      padding-left: $table-cell-padding + 20px;
+      padding-left: $table-cell-padding + $icon-width;
     }
 
     &.id,
+    &.issue_id,
+    &.legacy_id,
     &.parent,
     &.relations,
     &.tracker {
       width: 2%;
     }
 
-    &.id {
+    &.id,
+    &.issue_id,
+    &.legacy_id {
       font-weight: $font-weight-bold;
     }
 
@@ -75,15 +86,17 @@ table.list {
       padding-right: $table-cell-padding;
       padding-left: $table-cell-padding;
 
+      @if (parse-length($table-list-item-border, right) == 0) {
+        &:first-child {
+          padding-right: 0;
+        }
+      }
+
       input {
         margin: 2px 0 0;
       }
     }
 
-    &.id {
-      text-align: right;
-    }
-
     &.activity,
     &.assigned_to,
     &.attachments,
@@ -107,6 +120,8 @@ table.list {
       text-align: left;
     }
 
+    &.id,
+    &.legacy_id,
     &.estimated_hours,
     &.float,
     &.int,
@@ -124,10 +139,10 @@ table.list {
       white-space: nowrap;
 
       a {
-        padding-right: 5px;
+        margin-right: $padding-small-vertical;
 
         &.icon-only {
-          padding: 0;
+          margin-right: 0;
         }
       }
 
@@ -161,16 +176,15 @@ tr.project {
     color: $gray-600;
   }
 
-  &.idnt .name span {
+  &.idnt td.name {
-    padding-left: 16px;
     background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-600)));
     background-repeat: no-repeat;
-    background-position: -5px 50%;
   }
 
   @for $i from 1 through 9 {
-    &.idnt-#{$i} .name {
+    &.idnt-#{$i} td.name {
-      padding-left: $table-cell-padding + 16px * ($i - 1);
+      padding-left: $table-cell-padding + 16px * $i;
+      background-position: ($table-cell-padding + 16px * ($i - 1) - 3px) 50%;
     }
   }
 }
@@ -179,10 +193,15 @@ tr.issue {
   text-align: center;
   white-space: nowrap;
 
+  .category,
+  .enumeration,
+  .list,
+  .parent-subject,
+  .parent,
+  .relations,
   .string,
-  .text,
   .subject,
-  .category {
+  .text {
     white-space: normal;
   }
 
@@ -195,13 +214,6 @@ tr.issue {
     }
   }
 
-  &.idnt .subject a {
-    padding-left: 10px;
-    background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-600)));
-    background-repeat: no-repeat;
-    background-position: -5px 0;
-  }
-
   .controller-issues.action-index & {
     &.assigned-to-me {
       .assigned_to,
@@ -213,18 +225,41 @@ tr.issue {
     }
   }
 
+  &.idnt td.subject {
+    background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-600)));
+    background-repeat: no-repeat;
+  }
+
+  &.overdue td.due_date {
+    color: $brand-danger;
+  }
+
   @for $i from 1 through 9 {
-    &.idnt-#{$i} .subject {
+    &.idnt-#{$i} td.subject {
-      padding-left: $table-cell-padding + 16px * ($i - 1);
+      padding-left: $table-cell-padding + 16px * $i;
+      background-position: ($table-cell-padding + 16px * ($i - 1) - 3px) 50%;
     }
   }
 }
 
 .issues {
+  .block_column,
   .description,
   .last_notes {
-    padding: $table-cell-padding;
+    padding: 0;
     text-align: left;
+    white-space: normal;
+
+    > span {
+      display: block;
+      margin-bottom: $line-height-computed / 4;
+      padding: $table-cell-padding;
+      font-weight: $font-weight-bold;
+    }
+
+    pre {
+      white-space: normal;
+    }
 
     @media screen and (min-width: $screen-sm-min) {
       > .wiki {
@@ -233,25 +268,38 @@ tr.issue {
         overflow: auto;
       }
     }
-
-    pre {
-      white-space: normal;
-    }
   }
 }
 
 tr {
   span.expander {
-    margin-left: 0;
+    display: inline-block;
-    padding-left: 8px;
+    padding: 0;
-    background-image: inline-svg("plus.svg", (path: (fill: $btn-default-icon-color)));
+    float: left;
-    background-repeat: no-repeat;
+
-    background-position: center center;
+    &.icon {
-    cursor: pointer;
+      padding-left: 18px;
-    user-select: none;
+      text-align: center;
+
+      &::before {
+        margin: 0 0 0 -18px;
+        color: $gray-600;
+        font-size: 12px;
+      }
+    }
+
+    &:not(.icon) {
+      width: 18px;
+      padding: 0;
+      background-image: inline-svg("plus.svg", (path: (fill: $btn-default-icon-color)));
+      background-repeat: no-repeat;
+      background-position: center center;
+      cursor: pointer;
+      user-select: none;
+    }
   }
 
-  &.open span.expander {
+  &.open span.expander:not(.icon) {
     background-image: inline-svg("minus.svg", (path: (fill: $btn-default-icon-color)));
   }
 }
@@ -260,10 +308,35 @@ td.center {
   text-align: center;
 }
 
+td.assigned_to,
+td.last_updated_by {
+  white-space: normal;
+}
+
 .issue-report {
   table-layout: fixed;
 }
 
+.issue-report-graph {
+  width: 75%;
+  margin: $line-height-computed auto;
+}
+
+.sample-data {
+  margin: $line-height-computed / 2;
+  margin-bottom: $line-height-computed;
+  border: 1px solid $table-border-color;
+
+  td {
+    border: 1px solid $table-border-color;
+  }
+
+  tr:first-child td {
+    font-weight: $font-weight-bold;
+    text-align: center;
+  }
+}
+
 tr.builtin td.name {
   font-style: italic;
 }
@@ -301,13 +374,13 @@ tr.entry {
   &.file td {
     &.filename a,
     &.filename_no_report a {
-      margin-left: 16px;
+      margin-left: 18px;
     }
   }
 }
 
 @if $table-list-color-odd-rows {
-  table.list:not(.odd-even) tbody tr:nth-child(odd),
+  table.list:not(.odd-even) tbody tr:nth-child(odd):not(.ui-sortable-helper),
   .odd {
     > td {
       background-color: $table-bg-accent;
@@ -316,7 +389,7 @@ tr.entry {
 }
 
 @if $table-list-color-even-rows {
-  table.list:not(.odd-even) tbody tr:nth-child(even),
+  table.list:not(.odd-even) tbody tr:nth-child(even):not(.ui-sortable-helper),
   .even {
     > td {
       background-color: $table-bg-accent;
@@ -325,8 +398,16 @@ tr.entry {
 }
 
 @if $table-list-highlight-rows {
-  table.list > tbody > tr:nth-child(n):hover {
+  table.list > tbody > tr:nth-child(n):hover:not(.ui-sortable-helper) {
     background-color: $table-bg-hover;
+
+    @if $color-priorities {
+      @each $priority-id, $priority-color in $priority-color-map {
+        &.priority-#{$priority-id} {
+          background-color: rgba(map-get($priority-color, background), $table-color-hover-factor);
+        }
+      }
+    }
   }
 }
 
@@ -350,8 +431,33 @@ tr.entry {
   }
 }
 
+@if $color-priorities {
+  @each $priority-id, $priority-color in $priority-color-map {
+    tr.priority-#{$priority-id} {
+      &.odd td {
+        background-color: rgba(map-get($priority-color, background), $table-color-odd-factor);
+      }
+
+      &.even td {
+        background-color: rgba(map-get($priority-color, background), $table-color-even-factor);
+      }
+
+      td {
+        border-color: map-get($priority-color, border);
+        color: map-get($priority-color, color);
+      }
+
+      a {
+        color: map-get($priority-color, link);
+      }
+    }
+  }
+}
+
 @if $color-trackers {
   tr.issue .id > a,
+  tr.issue .issue_id > a,
+  tr.issue .legacy_id > a,
   a.issue,
   .relations > span > a.issue,
   .parent > a.issue {
@@ -388,7 +494,7 @@ tr.entry {
         right: 5px;
         bottom: 0;
         left: 5px;
-        height: calc(50% - 2px/2);
+        height: calc(50% - 2px / 2);
         transform: rotate(-4deg);
         transition: border-color $transition-time;
         border-top: 2px solid rgba($tracker-default-text, .95);
@@ -400,7 +506,8 @@ tr.entry {
     }
   }
 
-  tr.issue .id > a {
+  tr.issue .id > a,
+  tr.issue .legacy_id > a {
     display: block;
     padding: $tracker-list-padding;
 
@@ -410,6 +517,11 @@ tr.entry {
     }
   }
 
+  tr.issue .issue_id > a {
+    display: inline-block;
+    padding: $tracker-list-padding;
+  }
+
   @each $tracker-id, $tracker-colors in $tracker-colors-map {
     @include tracker(
       ".tracker-#{$tracker-id}",
@@ -443,18 +555,6 @@ tr.group {
   &:hover .toggle-all {
     display: inline;
   }
-
-  .count {
-    display: inline-block;
-    min-width: 1em;
-    margin: 0 5px;
-    padding: 1px 4px;
-    border-radius: $border-radius-small;
-    background-color: $brand-primary;
-    color: $brand-text;
-    font-size: $font-size-small;
-    text-align: center;
-  }
 }
 
 .toggle-all:hover {
@@ -609,7 +709,7 @@ table.files {
 
   tr.file td {
     &.filename {
-      padding-left: 20px + $table-cell-padding;
+      padding-left: $icon-width + $table-cell-padding;
       text-align: left;
     }
 
@@ -652,6 +752,15 @@ table.list.enumerations {
 //
 
 .query-totals {
+  #content & {
+    margin-top: 0;
+
+    @media screen and (min-width: $redmine-responsive-min) {
+      margin-top: -($line-height-computed * 2 + $btn-padding-vertical);
+      text-align: right;
+    }
+  }
+
   > span {
     margin-right: $padding-base-horizontal;
 

src/sass/components/_login.scss

@@ -4,7 +4,7 @@
 
 #login-form {
   box-sizing: border-box;
-  margin: $line-height-computed * 2 auto;
+  margin: $line-height-computed * 2 auto $line-height-computed;
 
   label,
   input:not([type="checkbox"]) {
@@ -33,6 +33,11 @@
     margin-bottom: $panel-body-padding-vertical;
   }
 
+  #login-submit {
+    padding-top: $padding-base-vertical;
+    padding-bottom: $padding-base-vertical;
+  }
+
   table {
     margin: auto;
     table-layout: fixed;

src/sass/components/_plugins.scss

@@ -1,3 +1,45 @@
+//
+// Additionals
+// https://www.redmine.org/plugins/additionals
+// --------------------------------------------------
+
+#sidebar .sidebar-additionals {
+  ul,
+  ol {
+    margin: 0 0 ($line-height-computed / 2);
+    padding-left: 1.5em;
+
+    ul,
+    ol {
+      margin-bottom: 0;
+    }
+  }
+
+  ul {
+    // stylelint-disable selector-max-compound-selectors
+    li {
+      list-style-type: disc;
+
+      li {
+        list-style-type: circle;
+
+        li {
+          list-style-type: square;
+        }
+      }
+    }
+  }
+}
+
+.action-login .login-additionals {
+  font-size: 1em;
+
+  @media screen and (min-width: $login-form-box-breakpoint) {
+    max-width: $login-form-width;
+  }
+}
+
+
 //
 // Redmine Backlogs
 // https://github.com/HolonGlobe/redmine_backlogs
@@ -44,12 +86,122 @@
 }
 
 
+//
+// Redmine Banner
+// https://github.com/akiko-pusu/redmine_banner
+// --------------------------------------------------
+
+#global_banner {
+  .box {
+    margin-bottom: $line-height-computed;
+  }
+}
+
+.banner_area {
+  @media screen and (max-width: $redmine-responsive-max) {
+    #main #content > & {
+      margin-bottom: $line-height-computed;
+    }
+  }
+
+  .banner {
+    @extend %fa-icon;
+    margin: 0;
+    padding: $padding-large-vertical $padding-large-horizontal;
+    padding-left: $padding-large-horizontal + 8px + 16px;
+    border: 1px solid $component-border;
+    border-radius: $border-radius-base;
+    background: $component-bg;
+    color: $component-color;
+
+    @media screen and (min-width: $redmine-responsive-min) {
+      border-radius: 0;
+    }
+
+    &::before {
+      content: $fa-var-info;
+      margin-left: -(8px + 16px);
+      float: left;
+      line-height: $line-height-computed;
+    }
+
+    &_info {
+      border-color: $flash-info-border;
+      background-color: $flash-info-bg;
+      color: $flash-info-text;
+
+      &::before {
+        content: $fa-var-info-circle;
+      }
+    }
+
+    &_warn {
+      border-color: $flash-warning-border;
+      background-color: $flash-warning-bg;
+      color: $flash-warning-text;
+
+      &::before {
+        content: $fa-var-warning;
+      }
+
+      a,
+      ~ div a {
+        color: $flash-warning-link;
+      }
+    }
+
+    &_alert {
+      border-color: $flash-error-border;
+      background-color: $flash-error-bg;
+      color: $flash-error-text;
+
+      &::before {
+        content: $fa-var-exclamation-circle;
+      }
+
+      a,
+      ~ div a {
+        color: $flash-error-link;
+      }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    ul,
+    ol {
+      margin-bottom: $line-height-computed / 2;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    a {
+      text-decoration: underline;
+    }
+  }
+
+  .banner_edit {
+    a {
+      margin-left: 5px;
+    }
+  }
+}
+
+
 //
 // Redmine Hearts
 // https://github.com/cat-in-136/redmine_hearts
 // --------------------------------------------------
 
 .journal > div + .contextual {
+  padding-top: 0;
+  padding-bottom: 0;
   border: 0;
 
   > .heart-link-with-count {
@@ -158,25 +310,400 @@
 }
 
 
+//
+// RedmineUP
+// https://www.redmineup.com/pages/plugins
+// --------------------------------------------------
+
+h2 {
+  .scope_title,
+  .live_search,
+  .tags {
+    vertical-align: top;
+  }
+
+  .live_search {
+    margin-left: $padding-side / 2;
+  }
+
+  .tags {
+    .tag_list {
+      margin-top: 0;
+    }
+  }
+}
+
+div.details {
+  &.contact,
+  &.product {
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+}
+
+
+//
+// Redmine Agile
+// https://www.redmineup.com/pages/plugins/agile
+// --------------------------------------------------
+
+html.agile-board-fullscreen .icon.icon-fullscreen {
+  padding: ($padding-small-vertical - 1px) $padding-small-vertical;
+  font-size: 0;
+  text-align: center;
+  text-indent: 0;
+  @include nice-shadow(1);
+
+  &::before {
+    margin: 0;
+  }
+}
+
+@if $agile-board-customize {
+  .agile-board {
+    table.list.issues-board {
+      tbody tr {
+        background-color: $body-bg;
+
+        > td.issue-status-col {
+          padding: 0;
+          padding-left: parse-length($agile-issue-card-margin, left);
+          background-color: $agile-board-background;
+
+          &.closed .issue-card {
+            background: $agile-issue-card-closed-background;
+          }
+        }
+      }
+    }
+
+    .issue-card {
+      margin: $agile-issue-card-margin;
+      margin-left: 0;
+      padding: $agile-issue-card-padding;
+      border: 1px solid $agile-issue-card-border;
+      border-width: $agile-issue-card-border-width;
+      border-radius: $agile-issue-card-border-radius;
+      background-color: $agile-issue-card-background;
+      color: $agile-issue-card-color;
+      @include nice-shadow(1);
+
+      &.ui-sortable-helper {
+        @include nice-shadow(4);
+      }
+
+      &:not(.context-menu-selection) {
+        .attributes,
+        em.info,
+        span.hours {
+          color: $text-color;
+        }
+      }
+
+      @each $class, $color in $agile-issue-card-color-map {
+        &.#{$class} {
+          border-color: map-get($color, border);
+          background-color: map-get($color, background);
+        }
+      }
+
+      .checklist,
+      .info,
+      .sub-issues {
+        border-color: rgba($black, .15);
+      }
+
+      p.issue-id,
+      p.name {
+        margin-bottom: 5px;
+
+        &:last-of-type {
+          margin-bottom: 0;
+        }
+      }
+
+      p.issue-id {
+        line-height: 1;
+      }
+
+      p.project {
+        border-radius: $agile-issue-card-border-radius - 1px;
+        border-color: rgba($black, .15);
+        background-clip: padding-box;
+      }
+
+      p.name {
+        font-weight: $font-weight-bold;
+      }
+    }
+  }
+
+  @each $class, $color in $agile-issue-card-color-map {
+    @if map-get($color, link) != $link-color {
+      .#{$class} {
+        a {
+          color: map-get($color, link);
+        }
+      }
+    }
+  }
+}
+
+.agile-board {
+  .quick-comment {
+    textarea {
+      margin-bottom: parse-length($agile-issue-card-padding, bottom);
+    }
+  }
+}
+
+
+.controller-agile_charts #main {
+  @if $css-grid-layout {
+    > div:not(#content):not(#sidebar) {
+      grid-area: footer;
+    }
+  } @else if $flexbox-layout {
+    flex-wrap: wrap;
+
+    > #footer {
+      flex: 1 0 auto;
+      order: 3;
+    }
+  }
+
+  // Page layout on Agile charts is broken, and with "Go to top" link
+  // from https://github.com/alphanodes/additionals plugin enabled
+  // the chart expands and resize event is triggered indefinitely.
+  // Hiding the "Go to top" link fixes this issue.
+  .gototop {
+    display: none;
+  }
+}
+
+
+//
+// Redmine CRM
+// https://www.redmineup.com/pages/plugins/crm
+// --------------------------------------------------
+
+table.sidebar.attributes {
+  tr {
+    th,
+    td {
+      padding: parse-length($table-condensed-cell-padding, top) 0;
+      vertical-align: top;
+    }
+
+    th {
+      padding-right: parse-length($table-condensed-cell-padding, right);
+    }
+  }
+}
+
+div.add-note {
+  input,
+  textarea {
+    margin-bottom: $line-height-computed;
+  }
+}
+
+@if $table-list-highlight-rows {
+  table.contacts.index,
+  table.contacts.index {
+    > tbody > tr:nth-child(n):hover {
+      background-color: $table-bg-hover;
+    }
+  }
+}
+
+
+//
+// Redmine Tags
+// https://www.redmineup.com/pages/plugins/tags
+// --------------------------------------------------
+
+.select2 {
+  .filter .values & {
+    min-width: 180px;
+    margin: 0;
+  }
+
+  &-container.select2-container--default {
+    color: $text-color;
+
+    .select2-selection--single,
+    .select2-selection--multiple {
+      min-height: $input-height-base;
+      line-height: $line-height-base;
+    }
+
+    .select2-selection--single {
+      height: $input-height-base;
+
+      .select2-selection__rendered {
+        padding-top: $input-padding-vertical;
+        padding-bottom: $input-padding-vertical;
+        border: 0;
+        font-size: $font-size-base;
+        line-height: $line-height-base;
+      }
+
+      .select2-selection__arrow {
+        height: $input-height-base;
+      }
+
+      .select2-selection__clear {
+        border: 0;
+      }
+    }
+
+    .select2-selection--multiple {
+      .select2-selection__rendered {
+        padding: 0 3px 3px;
+      }
+
+      .select2-selection__choice {
+        margin-top: 3px;
+        margin-right: 3px;
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+
+      .select2-search--inline {
+        input {
+          height: auto;
+          padding-top: 0;
+          padding-bottom: 0;
+          line-height: inherit;
+        }
+      }
+    }
+
+    .select2-selection {
+      transition:
+        border-color $transition-time 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);
+      background-clip: padding-box;
+
+      &.icon {
+        padding-left: 18px + 8px;
+
+        &::before {
+          position: absolute;
+          top: 50%;
+          left: 8px;
+          margin: ($fa-font-size-base / -2) 0 0;
+        }
+      }
+    }
+
+    &.select2-container {
+      &:focus,
+      * {
+        outline: none;
+      }
+
+      &--open,
+      &--focus {
+        .select2-selection {
+          border-color: rgba($input-border-focus, $input-border-focus-alpha);
+          box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 0 2px rgba($input-border-focus, $input-shadow-focus-alpha);
+        }
+      }
+    }
+
+    .select2-search__field {
+      &:focus {
+        border-color: rgba($input-border-focus, $input-border-focus-alpha);
+      }
+    }
+  }
+}
+
+span.tag-label-color {
+  @at-root body & {
+    padding: 0 !important; // stylelint-disable-line declaration-no-important
+    border: 0 !important; // stylelint-disable-line declaration-no-important
+    border-radius: $badge-border-radius;
+    box-shadow: inset 0 -1px 0 rgba($black, .12);
+    font-size: $font-size-small-px;
+
+    a,
+    span {
+      font-family: inherit;
+      font-size: inherit;
+    }
+
+    > a,
+    > span {
+      display: inline-block;
+      padding: 1px 5px;
+      text-shadow: 0 1px 0 rgba($black, .2);
+    }
+
+    a {
+      &:hover {
+        opacity: .8;
+      }
+    }
+  }
+}
+
+.list td.tags {
+  padding-bottom: max(parse-length($table-cell-padding, bottom) - 2px - 1px, 0);
+
+  span.tag-label-color {
+    margin-bottom: 2px;
+    margin-left: 0;
+    transform: translateY(-1px);
+  }
+}
+
+
 //
 // Redmine Checklists
 // https://www.redmineup.com/pages/plugins/checklists
 // --------------------------------------------------
 
-#checklist_form_items {
+.checklist {
-  .checklist-item {
+  li {
-    display: block;
+    a {
-    margin: 0;
+      margin: 0;
-    padding-top: $check-list-offset-top;
-    line-height: initial;
-
-    &.new {
-      padding-top: $padding-base-vertical;
       line-height: inherit;
     }
   }
 }
 
+#checklist_form_items {
+  .checklist-item {
+    display: block;
+    margin: 0 0 2px;
+
+    &.new {
+      margin: $padding-base-vertical 0 0;
+    }
+
+    input[type="checkbox"] {
+      position: relative;
+      top: 2px;
+      vertical-align: baseline;
+    }
+
+    input[type="button"] {
+      margin-right: 4px;
+    }
+  }
+}
+
+#checklist-menu.ui-menu {
+  a {
+    padding: 2px 0 2px 24px;
+  }
+}
 
 
 //
@@ -239,131 +766,6 @@
 }
 
 
-
-//
-// Redmine CRM People
-// http://www.redminecrm.com/projects/people/
-// --------------------------------------------------
-
-#people_list {
-  table.index {
-    margin-bottom: $line-height-computed;
-  }
-}
-
-#content {
-  .person.details {
-    margin-bottom: $line-height-computed;
-    padding: $issue-padding;
-    border: 1px solid $issue-border;
-    border-radius: $border-radius-base;
-    background-color: $issue-bg;
-
-    .avatar {
-      width: 64px;
-      max-width: 64px;
-      overflow: hidden;
-    }
-
-    .name,
-    .subject_info {
-      padding: 0 0 0 $issue-padding;
-    }
-
-    .name {
-      > h1 {
-        margin-bottom: 5px;
-      }
-
-      > p {
-        margin-bottom: 0;
-      }
-    }
-
-    .subject_info {
-      border-left: 1px solid $issue-border;
-
-      > ul {
-        margin: 0;
-      }
-    }
-
-    .icon {
-      background-image: none;
-    }
-  }
-
-  .department.issue.details {
-    > p {
-      clear: both;
-    }
-
-    > .author {
-      margin-bottom: 0;
-      clear: none;
-    }
-  }
-}
-
-#sidebar {
-  .person.attributes {
-    font-size: $font-size-list;
-
-    th,
-    td {
-      padding: $table-condensed-cell-padding;
-      text-align: left;
-      vertical-align: top;
-    }
-
-    .icon {
-      padding-left: $table-condensed-cell-padding + 20px;
-      background-image: none;
-
-      > a {
-        @extend %fa-icon;
-      }
-    }
-
-    .email {
-      td a {
-        display: block;
-        max-width: floor($sidebar-width / 3);
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        &:hover {
-          position: absolute;
-          max-width: 100%;
-          margin: -$table-condensed-cell-padding;
-          padding: $table-condensed-cell-padding;
-          background: $body-bg;
-          box-shadow: $panel-shadow;
-        }
-      }
-    }
-  }
-
-  .person_data {
-    td.avatar,
-    td.name {
-      padding: 0 0 $table-cell-padding;
-    }
-
-    td.avatar {
-      width: 40px;
-    }
-
-    td.name {
-      h4 {
-        margin: 0;
-        letter-spacing: 0;
-      }
-    }
-  }
-}
-
-
 //
 // Redmine codebutton
 // https://github.com/mediatainment/redmine_codebutton

src/sass/components/_print.scss

@@ -24,7 +24,7 @@
 
   #main {
     display: block;
-    overflow: visible !important; // scss-lint:disable ImportantRule
+    overflow: visible !important; // stylelint-disable-line declaration-no-important
     background: $white;
   }
 
@@ -32,7 +32,7 @@
     width: 100%;
     margin: 0;
     padding: 0;
-    overflow: visible !important; // scss-lint:disable ImportantRule
+    overflow: visible !important; // stylelint-disable-line declaration-no-important
     border: 0;
     background: $white;
   }
@@ -42,7 +42,7 @@
   }
 
   a {
-    // scss-lint:disable ImportantRule
+    // stylelint-disable declaration-no-important
     padding: 0 !important;
     background-color: transparent !important;
     color: $black !important;

src/sass/components/_progress.scss

@@ -20,6 +20,10 @@ table.progress {
     float: none;
   }
 
+  tr {
+    background: transparent !important; // stylelint-disable-line declaration-no-important
+  }
+
   td {
     height: $progress-height;
     padding: 0;
@@ -36,21 +40,26 @@ table.progress {
     }
 
     &.done {
-      background-color: $progress-bar-bg !important; // scss-lint:disable ImportantRule
+      background-color: $progress-bar-bg !important; // stylelint-disable-line declaration-no-important
     }
 
     &.closed {
-      background-color: $progress-bar-success-bg !important; // scss-lint:disable ImportantRule
+      background-color: $progress-bar-success-bg !important; // stylelint-disable-line declaration-no-important
     }
 
     &.todo {
-      background-color: $progress-bg !important; // scss-lint:disable ImportantRule
+      background-color: $progress-bg !important; // stylelint-disable-line declaration-no-important
+      mix-blend-mode: multiply;
     }
   }
 
   .issue & td {
     padding: 0;
   }
+
+  .context-menu-selection & td.todo {
+    mix-blend-mode: screen;
+  }
 }
 
 p {
@@ -60,8 +69,6 @@ p {
   }
 
   &.progress-info {
-    margin-top: -4px;
-    margin-bottom: 0;
     clear: left;
     color: $gray-700;
     font-size: 80%;

src/sass/components/_responsive.scss

@@ -1,5 +1,18 @@
-// scss-lint:disable SelectorDepth
+.hidden,
-.theme-Purplemine2 {
+.mobile-show {
+  display: none;
+}
+
+.inline-flex {
+  display: inline-flex;
+
+  body.controller-issues h2 & {
+    padding-right: 0;
+  }
+}
+
+// stylelint-disable selector-max-compound-selectors
+body {
   @media screen and (max-width: $redmine-responsive-max) {
     .flyout-menu + div {
       #header {
@@ -40,11 +53,14 @@
         }
 
         .drdn-trigger {
+          @include text-overflow;
           display: block;
           height: $responsive-header-height;
           padding: 0;
           background-color: transparent;
           box-shadow: none;
+          font-size: $font-size-large;
+          font-weight: $font-weight-normal;
           line-height: $responsive-header-height;
 
           &::before {
@@ -66,10 +82,20 @@
 
         .drdn-content {
           top: $responsive-header-height;
+          font-size: $font-size-base;
         }
       }
     }
 
+    #content {
+      overflow: auto;
+    }
+
+    #ajax-indicator {
+      left: 50%;
+      width: 200px;
+    }
+
     .mobile-toggle-button {
       width: $responsive-header-height;
       height: $responsive-header-height;
@@ -84,6 +110,10 @@
       background-color: $flyout-menu-bg;
       color: $flyout-menu-text;
 
+      .search-magnifier {
+        left: 18px;
+      }
+
       &__search {
         height: $responsive-header-height;
         padding: ($padding-side / 2);
@@ -95,39 +125,155 @@
         }
       }
 
+      &__avatar {
+        img.gravatar {
+          top: 0;
+        }
+      }
+
+      &__sidebar {
+        p {
+          padding-left: $padding-large-horizontal;
+        }
+      }
+
+      ul {
+        li:nth-child(n) {
+          a:not(.icon-only) {
+            height: auto;
+            padding: $padding-large-vertical $padding-large-horizontal;
+            line-height: $line-height-base;
+          }
+        }
+
+        &.queries {
+          li {
+            display: flex;
+
+            a {
+              flex: 1 1 auto;
+            }
+
+            .icon-only {
+              flex: 0;
+              padding-right: 0;
+              padding-left: 40px;
+              text-align: center;
+              text-overflow: initial;
+
+              &::before {
+                width: 40px;
+                margin-left: -40px;
+              }
+            }
+          }
+        }
+      }
+
       a {
         &,
         &:hover,
         &:focus {
           color: $flyout-menu-link;
+
+          &::before,
+          span {
+            color: inherit !important; // stylelint-disable-line declaration-no-important
+          }
+        }
+
+        &.selected {
+          background-color: $flyout-menu-link-active-bg;
+          color: $flyout-menu-link-active;
         }
       }
 
-      h3 {
+      h3,
+      h4 {
+        height: auto;
+        margin: 0;
+        padding: $padding-base-vertical $padding-base-horizontal;
         border-top: 1px solid $flyout-menu-header-border;
         border-bottom: 1px solid $flyout-menu-header-border;
         background-color: $flyout-menu-header-bg;
         color: $flyout-menu-header-text;
+        line-height: $line-height-base;
+
+        + p {
+          margin-top: $padding-large-vertical;
+        }
+      }
+
+      h4 {
+        padding: 0 $padding-base-horizontal;
+      }
+
+      form {
+        padding-left: 0;
+
+        > ul {
+          margin-left: 0;
+
+          li:nth-child(n) {
+            padding-left: $padding-large-horizontal;
+            line-height: inherit;
+
+            label {
+              a {
+                display: block;
+                padding: $padding-base-vertical $padding-base-horizontal;
+              }
+            }
+          }
+
+          + p {
+            margin-top: $padding-large-vertical;
+          }
+        }
       }
 
       #admin-menu {
         a {
-          background-position: 8px center;
+          background-position: 8px center !important; // stylelint-disable-line declaration-no-important
+
+          &.additionals {
+            padding-left: 32px !important; // stylelint-disable-line declaration-no-important
 
-          &,
-          &:hover,
-          &:focus {
             &::before {
-              color: $flyout-menu-link;
+              margin-right: $padding-small-vertical;
+              font-size: $fa-font-size-base;
             }
           }
+        }
+      }
 
-          &.selected {
+      #watchers {
-            background-color: $body-bg;
+        .contextual {
-            color: $text-color;
+          padding-top: $line-height-computed / 2;
+          padding-bottom: $line-height-computed / 2;
+        }
 
-            &::before {
+        .watchers {
-              color: $text-color;
+          li {
+            margin: ($line-height-computed / 2) 0 0;
+            padding: 0;
+
+            img.gravatar {
+              top: 0;
+            }
+
+            a {
+              height: auto;
+              border-top: 0;
+              line-height: initial;
+            }
+
+            .delete {
+              margin-right: $padding-large-vertical;
+              margin-left: auto;
+              float: none;
+              text-align: center;
+              text-overflow: initial;
             }
           }
         }
@@ -224,21 +370,40 @@
 
       label {
         display: inline-block;
+
+        input[type="checkbox"],
+        input[type="radio"] {
+          margin-top: $check-input-margin-btn-v;
+        }
       }
     }
 
+    #content > .contextual > span {
+      margin-bottom: 0;
+    }
+
+    #content > .contextual > a,
+    #content > .contextual .drdn,
+    p.buttons a {
+      display: inline-block;
+      margin: 0 2px 5px 0;
+      float: none;
+    }
+
     // For Redmine 4.0+
     #content > .contextual .drdn {
       padding: 0;
       border: 0;
 
       .drdn-trigger {
-        padding: ($btn-padding-vertical * 2) $btn-padding-horizontal;
+        padding: $btn-padding-vertical $btn-padding-horizontal;
       }
 
       .drdn-items {
         a {
           margin: 3px 0 0;
+          padding-top: $btn-padding-vertical;
+          padding-bottom: $btn-padding-vertical;
 
           &:first-child {
             margin-top: 0;
@@ -261,5 +426,39 @@
         float: none;
       }
     }
+
+    div#issue-changesets {
+      div.changeset {
+        padding: 0;
+      }
+    }
+
+    #admin-index > #admin-menu li {
+      padding: 0;
+
+      a {
+        background-position: 8px center !important; // stylelint-disable-line declaration-no-important
+      }
+    }
+  }
+
+  // Tweaks for smartphones, touchscreens
+  @media (hover: none) and (pointer: coarse) {
+    .mobile-toggle-button::after {
+      margin-top: 0;
+    }
+
+    .query-columns {
+      span {
+        display: block;
+        margin-bottom: $line-height-computed / 2;
+      }
+
+      .buttons {
+        input[type="button"] {
+          display: inline-block;
+        }
+      }
+    }
   }
 }

src/sass/components/_rouge.scss

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

src/sass/components/_simple-list.scss

@@ -64,6 +64,7 @@
 
     @if $use-gravatars {
       .gravatar {
+        top: 0;
         margin-top: -2px;
         margin-right: $activity-avatar-space;
         float: left;
@@ -104,10 +105,17 @@
   input,
   select {
     margin-right: 5px;
+    margin-bottom: $line-height-computed / 2;
   }
 
   label {
     @include check-inline;
+    line-height: $input-height-base;
+
+    input[type="checkbox"],
+    input[type="radio"] {
+      margin-top: $check-input-margin-btn-v;
+    }
   }
 
   p:last-child {

src/sass/components/_tabs.scss

@@ -56,19 +56,19 @@ $tabs-height: $line-height-computed + $tab-padding-vertical * 2 + 1px + 1px;
     top: 0;
     right: 0;
     width: $tabs-buttons-width;
+    border-bottom: 1px solid $tab-border;
     background-color: $body-bg;
 
     > button {
       width: 50%;
-      height: $tabs-height;
+      height: $tabs-height - 1px;
       margin: 0;
       padding: 0;
       float: left;
       transition: opacity $transition-time;
       border: 0 none;
-      border-bottom: 1px solid $tab-border;
       border-radius: 0;
-      opacity: .8;
+      opacity: $icon-opacity;
       background-color: $body-bg;
       background-repeat: no-repeat;
       background-position: center center;
@@ -76,12 +76,16 @@ $tabs-height: $line-height-computed + $tab-padding-vertical * 2 + 1px + 1px;
 
       &:hover,
       &:active {
-        opacity: 1;
+        opacity: $icon-hover-opacity;
       }
 
       &:active {
         background-color: $tab-hover-bg;
       }
+
+      &.disabled {
+        opacity: $icon-opacity / 2;
+      }
     }
 
     .tab-left {
@@ -163,7 +167,7 @@ div.tabs:not(#main-menu) {
       margin-bottom: 3px;
     }
 
-    label[for=principal_search] {
+    label[for="principal_search"] {
       padding-left: 0;
     }
   }

src/sass/components/_top.scss

@@ -3,18 +3,21 @@
 // --------------------------------------------------
 
 #top-menu {
+  $top-menu-padding-vertical:   $padding-small-vertical + 1px;
+  $top-menu-padding-horizontal: $padding-side;
   @extend %clearfix;
-  position: relative;
+  box-sizing: border-box;
-  padding: $padding-small-vertical $padding-side;
+  padding: $top-menu-padding-vertical $top-menu-padding-horizontal;
   background: $top-menu-bg;
   color: $top-menu-text;
   font-size: $font-size-small;
 
   @if $top-menu-collapse {
-    $toggler-position-v:    $padding-small-vertical + 1px;
+    $toggler-position-v:    $top-menu-padding-vertical + 1px;
     $toggler-position-h:    1px;
 
-    max-height: floor($font-size-base * $font-size-small-unitless * $line-height-base) + $padding-small-vertical;
+    position: relative;
+    max-height: floor($font-size-base * $font-size-small-unitless * $line-height-base) + $top-menu-padding-vertical * 2;
     padding-bottom: 0;
     overflow: hidden;
 
@@ -24,7 +27,7 @@
 
     a {
       display: inline-block;
-      margin-bottom: $padding-small-vertical;
+      margin-bottom: $top-menu-padding-vertical;
       white-space: nowrap;
     }
 
@@ -330,6 +333,7 @@
 
         &:hover,
         &:focus {
+          background-color: $main-menu-bg-hover;
           box-shadow: inset 0 (-$main-menu-shadow-width) 0 $main-menu-shadow-hover;
           text-decoration: none;
         }
@@ -337,6 +341,7 @@
         &.selected {
           padding-bottom: $main-menu-padding-vertical - $main-menu-shadow-width;
           border-bottom: 3px solid $main-menu-shadow-active;
+          background-color: $main-menu-bg-active;
           box-shadow: none;
           color: $main-menu-link-active;
           font-weight: $font-weight-semi-bold;
@@ -412,18 +417,23 @@
   }
 
   .tabs-buttons {
-    display: none !important; // scss-lint:disable ImportantRule
+    display: none !important; // stylelint-disable-line declaration-no-important
     padding-left: 0;
+    border-color: $main-menu-border;
     background-color: $main-menu-bg;
 
     > button {
       box-sizing: border-box;
-      height: $tabs-height;
+      height: $tabs-height - 1px;
       background-color: $main-menu-bg;
+
+      &:hover {
+        background-color: $main-menu-bg-hover;
+      }
     }
   }
 
   ul + .tabs-buttons {
-    display: block !important; // scss-lint:disable ImportantRule
+    display: block !important; // stylelint-disable-line declaration-no-important
   }
 }

src/sass/components/_wiki.scss

@@ -23,16 +23,18 @@
   }
 }
 
-.controller-wiki .wiki > .preview,
+.controller-wiki {
-.wiki.wiki-preview {
+  .wiki > .preview,
-  font-size: $wiki-font-size;
+  .wiki.wiki-preview {
+    font-size: $wiki-font-size;
+  }
 }
 
 div.wiki {
   color: $wiki-text;
   line-height: $wiki-line-height;
 
-  //scss-lint:disable SingleLinePerSelector
+  // stylelint-disable selector-list-comma-newline-after
   h1, .h1,
   h2, .h2,
   h3, .h3,
@@ -109,16 +111,18 @@ div.wiki {
     }
   }
 
-  >:last-child {
+  > :last-child {
     margin-bottom: 0;
   }
 
   blockquote {
-    >:first-child {
+    margin-bottom: 1em;
+
+    > :first-child {
       margin-top: 0;
     }
 
-    >:last-child {
+    > :last-child {
       margin-bottom: 0;
     }
   }
@@ -155,7 +159,8 @@ div.wiki {
   }
 
   li > p {
-    margin-top: ($line-height-computed / 2);
+    margin-top: .25em;
+    margin-bottom: 0;
   }
 
   table {
@@ -167,7 +172,10 @@ div.wiki {
     word-break: keep-all;
   }
 
-  tr:nth-child(2n) {
+  // Textile
+  tbody:first-child tr:nth-child(2n),
+  // Markdown
+  thead + tbody tr:nth-child(2n-1) {
     background-color: $table-bg-accent;
   }
 
@@ -177,7 +185,8 @@ div.wiki {
     border: 1px solid $table-border-color;
   }
 
-  .noborder {
+  .noborder,
+  .wiki-class-noborder {
     border: 0 none;
 
     td,
@@ -193,19 +202,18 @@ div.wiki {
   code {
     padding: .2em .33em;
     border-radius: $border-radius-base;
-    background-color: rgba($black, .04);
+    background-color: rgba($gray-500, .3);
     font-size: $font-size-small;
   }
 
   pre {
     width: auto;
     margin-bottom: 1.15em;
-    padding: 4px 8px;
+    padding: 12px 15px;
     overflow-x: auto;
     overflow-y: hidden;
-    border: 1px solid rgba($black, .068);
     border-radius: $border-radius-base;
-    background-color: rgba($black, .03);
+    background-color: rgba($gray-500, .15);
     font-size: $font-size-small;
 
     code {
@@ -222,30 +230,27 @@ div.wiki {
   }
 
   .toc {
+    display: table;
+    max-width: 45%;
     margin-bottom: $line-height-computed;
     margin-left: 0;
-    padding: 0;
+    padding: $padding-small-vertical $padding-small-horizontal;
     list-style-type: none;
+    border: 1px solid $toc-border;
+    border-radius: $border-radius-base;
+    background-color: $toc-bg;
+    box-shadow: $toc-shadow;
+    color: $toc-text;
+    font-size: $font-size-small;
 
-    &.right,
+    a {
-    &.left {
+      color: $toc-link;
-      max-width: 45%;
+      font-weight: $font-weight-normal;
-      padding: 8px;
+      text-decoration: none;
-      border: 1px solid $highlight-border;
-      border-radius: $border-radius-base;
-      background-color: $highlight-bg;
-      box-shadow: $panel-shadow;
-      font-size: $font-size-small;
 
-      a {
+      &:hover {
-        color: $highlight-text;
+        color: $toc-link-hover;
-        font-weight: $font-weight-normal;
+        text-decoration: underline;
-        text-decoration: none;
-
-        &:hover {
-          color: darken($highlight-text, 10%);
-          text-decoration: underline;
-        }
       }
     }
 
@@ -272,7 +277,7 @@ div.wiki {
     }
 
     li {
-      // scss-lint:disable SelectorDepth
+      // stylelint-disable selector-max-compound-selectors
       margin: 0;
 
       li {
@@ -313,12 +318,9 @@ h5,
 h6 {
   .wiki-anchor {
     display: none;
-    position: relative;
-    top: -(1em - $font-size-small);
     margin-left: 5px;
-    color: $headings-anchor-color !important; // scss-lint:disable ImportantRule
+    color: $headings-anchor-color !important; // stylelint-disable-line declaration-no-important
-    font-size: $font-size-small;
+    text-decoration: none !important; // stylelint-disable-line declaration-no-important
-    text-decoration: none !important; // scss-lint:disable ImportantRule
   }
 
   &:hover {
@@ -341,7 +343,7 @@ p.footnote {
     content: "";
     display: block;
     width: 300px;
-    margin-top:  $line-height-computed;
+    margin-top: $line-height-computed;
     padding-top: $line-height-computed / 2;
     border-top: 1px solid $gray-400;
   }
@@ -351,6 +353,16 @@ p.footnote {
   }
 }
 
+.ltr,
+.wiki-class-ltr {
+  direction: ltr;
+}
+
+.rtl,
+.wiki-class-rtl {
+  direction: rtl;
+}
+
 .preview {
   margin-top: $line-height-computed;
   padding: $padding-wiki;

src/sass/functions/_parse-length.scss

@@ -0,0 +1,49 @@
+// Extract the length of margin/padding/border
+// for given side from a shorthand syntax.
+//
+// Examples:
+// parse-length(1px, top) -> 1px
+// parse-length(1px 2px, right) -> 2px
+// parse-length(1px 2px 3px 4px, bottom) -> 3px
+// parse-length(1px 2px 3px 4px, left) -> 4px
+//
+@function parse-length($value, $side) {
+  $index: 1;
+
+  // Top values are always at index 1. The same for when the list has only one item
+  @if ($side == top or length($value) == 1) {
+    $index: 1;
+  }
+  // Covers "vertical horizontal" style
+  @else if (length($value) == 2) {
+    @if ($side == left or $side == right) {
+      $index: 2;
+    }
+    @if ($side == bottom) {
+      $index: 1;
+    }
+  }
+  // Covers "top horizontal bottom" style
+  @else if (length($value) == 3) {
+    @if ($side == left or $side == right) {
+      $index: 2;
+    }
+    @if ($side == bottom) {
+      $index: 3;
+    }
+  }
+  // Covers "top right bottom left" style
+  @else if (length($value) == 4) {
+    @if ($side == right) {
+      $index: 2;
+    }
+    @if ($side == bottom) {
+      $index: 3;
+    }
+    @if ($side == left) {
+      $index: 4;
+    }
+  }
+
+  @return nth($value, $index);
+}

src/sass/javascripts/_sidebar-toggler.scss

@@ -1,9 +1,12 @@
 @if $enable-sidebar-toggler {
-  $toggler-position-v:          1px;
-  $toggler-position-h:          -3px;
-
   #main {
     position: relative;
+
+    // Fix full screen view for dashboard plugin
+    // https://github.com/jgraichen/redmine_dashboard
+    @at-root .controller-rdb_taskboard & {
+      position: static;
+    }
   }
 
   #sidebar {
@@ -35,7 +38,7 @@
   .sidebar-toggler {
     display: block;
     position: absolute;
-    top: $toggler-position-v;
+    top: 1px;
     width: 14px;
     height: 16px;
     border: 2px solid $gray-700;
@@ -56,11 +59,23 @@
     }
 
     @if $sidebar-position == "left" {
-      left: $toggler-position-h;
+      left: 0;
       background-image: inline-svg("chevron-left.svg", (path: (fill: $gray-700)));
+
+      @if not $fixed-layout {
+        border-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
     } @else {
-      right: $toggler-position-h;
+      right: 0;
       background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-700)));
+
+      @if not $fixed-layout {
+        border-right: 0;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
     }
 
     &.sidebar-hidden {

src/sass/mixins/_buttons.scss

@@ -1,9 +1,9 @@
 // Button sizes
 @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
   padding: $padding-vertical $padding-horizontal;
+  border-radius: $border-radius;
   font-size: $font-size;
   line-height: $line-height;
-  border-radius: $border-radius;
 }
 
 @mixin button-variant($color, $bg, $border) {

src/sass/mixins/_center-block.scss

@@ -2,6 +2,6 @@
 
 @mixin center-block() {
   display: block;
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
 }

src/sass/mixins/_forms.scss

@@ -44,9 +44,9 @@
   @extend %clearfix;
   position: relative;
   padding-left: $check-input-gutter;
+  font-weight: $font-weight-normal;
   line-height: $line-height-base;
   text-align: left;
-  font-weight: $font-weight-normal;
 
   input[type="checkbox"],
   input[type="radio"] {

src/sass/mixins/_image.scss

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

src/sass/mixins/_issues.scss

@@ -27,6 +27,8 @@
 
 @mixin tracker($parent, $background, $color) {
   tr#{$parent} .id > a,
+  tr#{$parent} .issue_id > a,
+  a#{$parent}.issue,
   a#{$parent},
   .relations > span > a#{$parent},
   .parent > a#{$parent} {

src/sass/mixins/_shadows.scss

@@ -5,13 +5,13 @@
 
   @if ($depth == 1) {
     $shadow: 0 1px 2px rgba(#000, .25);
-  } @elseif ($depth == 2) {
+  } @else if ($depth == 2) {
     $shadow: 0 5px 8px -2px rgba(#000, .25), 0 1px 2px rgba(#000, .3);
-  } @elseif ($depth == 3) {
+  } @else if ($depth == 3) {
     $shadow: 0 8px 16px -3px rgba(#000, .25), 0 2px 4px rgba(#000, .3);
-  } @elseif ($depth == 4) {
+  } @else if ($depth == 4) {
     $shadow: 0 14px 24px -4px rgba(#000, .25), 0 3px 10px rgba(#000, .3);
-  } @elseif ($depth == 5) {
+  } @else if ($depth == 5) {
     $shadow: 0 20px 32px -2px rgba(#000, .25), 0 4px 12px rgba(#000, .3);
   }
 

src/sass/plugins/redmine_backlogs/global.scss

@@ -67,8 +67,9 @@ input.editor,
   @include placeholder;
   height: $input-height-base;
   padding: $input-padding-vertical $input-padding-horizontal;
-  transition: border-color $transition-time ease-in-out,
+  transition:
-              box-shadow $transition-time ease-in-out;
+    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;
@@ -91,8 +92,9 @@ button.ui-multiselect {
   height: $input-height-base;
   padding: $input-padding-vertical $input-padding-horizontal;
   overflow: hidden;
-  transition: border-color $transition-time ease-in-out,
+  transition:
-              box-shadow $transition-time ease-in-out;
+    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);
@@ -254,7 +256,7 @@ ul.ui-sortable {
 .ui-tooltip {
   .ui-tooltip-content {
     hr {
-      margin-top:    $line-height-computed / 2;
+      margin-top: $line-height-computed / 2;
       margin-bottom: $line-height-computed / 2;
       border: 0;
       border-top: 1px solid $hr-border;

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

@@ -1,4 +1,4 @@
-// scss-lint:disable Comment
+// stylelint-disable comment-whitespace-inside, no-duplicate-selectors
 @import "../common";
 
 /*
@@ -66,7 +66,7 @@
 ----------------------------------*/
 
 .ui-state-disabled {
-  cursor: default !important; // scss-lint:disable ImportantRule
+  cursor: default !important; // stylelint-disable-line declaration-no-important
 }
 
 /* Icons
@@ -631,7 +631,7 @@
   }
 
   .ui-accordion-header-active {
-    border-bottom: 0 !important; // scss-lint:disable ImportantRule
+    border-bottom: 0 !important; // stylelint-disable-line declaration-no-important
   }
 
   .ui-accordion-header a {
@@ -734,7 +734,7 @@
   overflow: visible;
   zoom: 1;
   text-align: center;
-  text-decoration: none !important; // scss-lint:disable ImportantRule
+  text-decoration: none !important; // stylelint-disable-line declaration-no-important
   cursor: pointer;
 }
 
@@ -1007,7 +1007,7 @@ button.ui-button::-moz-focus-inner {
       padding: 0;
       float: left;
       list-style: none;
-      border-bottom: 0 !important; // scss-lint:disable ImportantRule
+      border-bottom: 0 !important; // stylelint-disable-line declaration-no-important
       white-space: nowrap;
 
       a {
@@ -1048,7 +1048,7 @@ button.ui-button::-moz-focus-inner {
   }
 
   .ui-tabs-hide {
-    display: none !important; // scss-lint:disable ImportantRule
+    display: none !important; // stylelint-disable-line declaration-no-important
   }
 }
 
@@ -1361,7 +1361,7 @@ button.ui-button::-moz-focus-inner {
   }
 }
 
- /* Progressbar
+/* Progressbar
 ----------------------------------*/
 
 .ui-progressbar {

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

@@ -11,13 +11,13 @@
 
 .ui-multiselect-single .ui-multiselect-checkboxes {
   input {
-    position: absolute !important; // scss-lint:disable ImportantRule
+    position: absolute !important; // stylelint-disable-line declaration-no-important
-    top: auto !important; // scss-lint:disable ImportantRule
+    top: auto !important; // stylelint-disable-line declaration-no-important
     left: -9999px;
   }
 
   label {
-    padding: 5px !important; // scss-lint:disable ImportantRule
+    padding: 5px !important; // stylelint-disable-line declaration-no-important
   }
 }
 

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

@@ -22,16 +22,13 @@
   word-wrap: break-word;
 }
 
-.ui-tooltip-tip {
-  border-color: $tooltip-border;
-  background-color: $tooltip-bg;
-}
-
 .ui-tooltip-tip {
   position: absolute;
   z-index: 10;
   margin: 0 auto;
   overflow: hidden;
   border: 0 none;
+  border-color: $tooltip-border;
   background: transparent;
+  background-color: $tooltip-bg;
 }

src/sass/plugins/redmine_backlogs/master_backlog.scss

@@ -189,8 +189,9 @@ $story-sp-input-width:          50px;
 
       &:focus {
         border-color: lighten($header-bg, 25%);
-        box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2),
+        box-shadow:
-              0 0 0 1px lighten($header-bg, 25%);
+          inset 0 1px 3px rgba(0, 0, 0, .2),
+          0 0 0 1px lighten($header-bg, 25%);
         color: $gray-950;
       }
     }
@@ -279,7 +280,7 @@ $story-sp-input-width:          50px;
         $name-width-minus: $header-right-width-wider + 35px;
 
         position: relative;
-        width: calc(100% - #{$name-width-minus}) !important; // scss-lint:disable ImportantRule
+        width: calc(100% - #{$name-width-minus}) !important; // stylelint-disable-line declaration-no-important
         min-width: 128px;
         margin-left: $header-line-height - 2px;
         float: left;
@@ -592,8 +593,9 @@ $story-sp-input-width:          50px;
 
         &:focus {
           border-color: darken($highlight-border, 15%);
-          box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075),
+          box-shadow:
-                0 0 5px rgba(darken($highlight-border, 15%), .5);
+            inset 0 1px 2px rgba(0, 0, 0, .075),
+            0 0 5px rgba(darken($highlight-border, 15%), .5);
           color: $gray-950;
         }
       }
@@ -643,7 +645,7 @@ $story-sp-input-width:          50px;
         &.subject {
           $subject-width-minus: $story-status-input-width + $story-sp-input-width + 5px * 2;
 
-          width: calc(100% - #{$subject-width-minus}) !important; // scss-lint:disable ImportantRule
+          width: calc(100% - #{$subject-width-minus}) !important; // stylelint-disable-line declaration-no-important
           height: 60px;
           float: left;
           overflow: auto;
@@ -755,9 +757,10 @@ $story-sp-input-width:          50px;
       @include button-size($input-padding-vertical, $input-padding-horizontal, $font-size-base, $line-height-base, $border-radius-base);
       display: inline-block;
       margin-bottom: 0;
-      transition: background-color ease-in-out .07s,
+      transition:
-                  border-color ease-in-out .07s,
+        background-color ease-in-out .07s,
-                  box-shadow ease-in-out .07s;
+        border-color ease-in-out .07s,
+        box-shadow ease-in-out .07s;
       border: 1px solid;
       font-weight: $btn-font-weight;
       text-align: center;