Update package versions

Fix sorting behavior on enumeration page

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2

.eslintrc.js

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

.github/workflows/lint.yml

@@ -0,0 +1,52 @@
+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 14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Eslint
+        run: npm run lint:js
+
+      - name: Stylelint
+        run: npm run lint:sass
+
+  build:
+    runs-on: ubuntu-18.04
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x, 14.x]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install npm dependencies
+        run: npm ci --production
+
+      - name: Check build
+        run: npm run build

.gitignore

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

.jshintrc

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

.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,151 +0,0 @@
-scss_files: "**/*.scss"
-
-linters:
-  BangFormat:
-    enabled: true
-    space_before_bang: true
-    space_after_bang: false
-
-  BorderZero:
-    enabled: true
-
-  ColorKeyword:
-    enabled: true
-
-  Comment:
-    enabled: false
-
-  DebugStatement:
-    enabled: true
-
-  DeclarationOrder:
-    enabled: false
-
-  DuplicateProperty:
-    enabled: true
-
-  ElsePlacement:
-    enabled: false
-    style: same_line
-
-  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: false
-    character: space
-    width: 4
-
-  LeadingZero:
-    enabled: true
-    style: exclude_zero
-
-  MergeableSelector:
-    enabled: false
-
-  NestingDepth:
-    enabled: true
-    max_depth: 6
-
-  PlaceholderInExtend:
-    enabled: true
-
-  PropertySortOrder:
-    enabled: true
-    order: smacss
-    ignore_unspecified: true
-
-  PropertySpelling:
-    enabled: true
-    extra_properties: []
-
-  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
-
-  SpaceBeforeBrace:
-    enabled: true
-    style: space
-    allow_single_line_padding: true
-
-  SpaceBetweenParens:
-    enabled: true
-    spaces: 0
-
-  StringQuotes:
-    enabled: true
-    style: double_quotes
-
-  TrailingSemicolon:
-    enabled: true
-
-  TrailingZero:
-    enabled: false
-
-  UnnecessaryMantissa:
-    enabled: true
-
-  UnnecessaryParentReference:
-    enabled: true
-
-  UrlFormat:
-    enabled: true
-
-  UrlQuotes:
-    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,
+  }
+};

CHANGELOG.md

@@ -0,0 +1,319 @@
+v2.14.0 (2021-01-27):
+
+* Merged #220: fixed drag & drop behavior.
+
+v2.13.0 (2020-09-26):
+
+* Replaced node-sass with sass.
+* Resolved issues with `inline-svg` function in Node 14.x.
+
+v2.12.1 (2020-08-11):
+
+* Fixed #204 - missing context menu icons in Easy WBS plugin.
+
+v2.12.0 (2020-08-01):
+
+* Fixed #196 and #199: text wrapping in certain column types.
+* Merged #203: fixed pagination overlapping wiki content.
+
+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
+
+v2.0.1 (2019-03-17):
+
+* Fixed #90: regression in some sidebar layouts
+* Removed reduntant `abbr[title]` styles
+
+v2.0 (2019-03-13):
+
+* Refreshed, modernized look & feel
+* Added priority icons
+* Removed `$color-priorities` setting and styles
+* Improved Redmine 4.0 compatibility
+* Updated Font Awesome icons to 4.7.0
+
+v1.10.0 (2019-03-12):
+
+* Fixed #86: added support for redmine_hearts plugin
+
+v1.9.0 (2019-03-01):
+
+* Fixed #42: override some styles from [RM+](http://rmplus.pro) plugins
+* Merged #43: fixes for Redmine 3.3.2.devel
+* Support for responsive menu and further changes for Redmine 3.3.2.devel (fixes #26)
+* Improved styles for custom flash messages in wiki content (e.g. for [WikiNG](http://www.redmine.org/plugins/wiking) plugin)
+* Introduce project tiles on projects list page (enabled by default, can be switched off by setting `$use-project-tiles` to `false`)
+* Fixed #44: adjust width of the label column on the login form
+* Merged #49: German translations
+* Fixed #50: printed content on second page onwards was missing in Firefox
+* Fixed #51: a plugin dropdown in top menu could be too narrow
+* Fixed #52: delete watcher icon in the sidebar was missing
+* Fixed #54: long checkbox lists will be scrollable
+* Fixed #62: anchors won't scroll the page
+* Fixed #69: fixed "remember me" checkbox layout on login page
+* Fixed #78: files not visible on list in wiki when there is a lot of them
+* Updated dependencies
+* Fixed #81: top watchers checkboxes were not visible on Firefox
+* Removed `checkbox` and `radio` mixins in favour of `check`
+* Fixed #83: editor tabs layout in Redmine 4.0
+
+v1.8.0 (2016-11-20):
+
+* Fixed #19: missing text wrapping for long text custom fields
+* Fixed #20: applied Font Awesome font-family for icons in Time Tracker overview
+* Fixed duplicated pencil icon for Description in issue form in Redmine 3.1.2+
+* Fixed #21: added styling for compatibility with layout changes in Redmine 3.2.0
+* Fixed #23: set width for progress bars
+* Fixed #25: proper styles for pagination
+* Fixed #28: correct icon will be displayed for users that cannot edit notes in journal
+* Fixed #30: styles will now compile with latest Sass
+* Fixed #32, #33: improve @shawndibble's styles for new main menu styles in Redmine 3.3
+* Various small visual tweaks
+* Fixed #34: project breadcrumbs in the header should wrap nicely
+* Fixed #35: `.icon-only` class should now display only icons, buttons with icons should de displayed correctly with Font-Awesome disabled
+* Fixed #36: npm dependencies can be installed on production environments + update grunt to its latest version
+* Fixed #37: added support for drag'n'drop re-ordering in issue statuses, roles, and trackers settings
+* Fixed #38: corrected z-index for dropdown new item menu on backlogs page (thanks to @futaz, see PR #39)
+* Changed indentation to 2 spaces (to match with Redmine's coding style)
+* Introduced [autoprefixer](https://github.com/postcss/autoprefixer) via [PostCSS](http://postcss.org)
+* Updated [scss-lint](https://github.com/brigade/scss-lint) rules
+* Added [JavaScript Standard Style](http://standardjs.com)
+
+v1.7.2 (2015-10-12):
+
+* Fixed `.pagination` float in project members settings
+* Lists' cells are aligned to center by default (as in Redmine's default theme)
+
+v1.7.1 (2015-10-10):
+
++ Improved styling for [Stuff To Do][stuff_to_do] plugin
+
+v1.7.0 (2015-09-25):
+
+* Added styles for optgroup (Firefox only)
+* Fixed #13: #header was missing clearfix and was breaking the layout is some cases
+* Coloring issue's title instead of link in Gantt diagram for overdue issues
+* Updated npm packages: grunt-sass from 0.18.0 to 1.0.0 and grunt-contrib-uglify 0.7.0 to 0.9.1
+* Use flexbox layout by default (can be changed by setting `$flexbox-layout` to `false`)
+* Fixed animation issue when showing sidebar
+* Slightly modified buttons' style
+* Few visual tweaks: nicer shadows, improved datepickers layout
++ Configurable list borders and highlighting of hovered and even/odd rows
++ Introduce `$pagination-padding-` variables and make pagination buttons' height equal to buttons by default
+* Fixed #16: remove `white-space: nowrap` from external links to prevent breaking the page with flexbox layout
+* Fixed colored trackers in tooltips in Backlogs plugin
+* Fixed broken codebutton modal after making buttons wider
+* Changed the license to MIT
+
+v1.6.0 (2015-06-10):
+
+* Fixed #8: Setting `$top-menu-collapse` to `true` will enable script allowing to toggle if top menu should be collapsed (no wrapping) or expanded (wrapped, with auto height)
++ Header matching current URL fragment will have `#` prepended
++ Introduced `$font-weight-normal` and `$font-weight-bold` variables to give better control on the appearance of text with custom fonts
+* Fixed #9: Added `$main-menu-collapse` and applied the same logic as in #8
+* Fixed #12: Removed `display: block` from issue's subject link to allow context menu to popup upon right click next to subject
+* Resolved #11: Company logo can be added to the header
+
+v1.5.0 (2015-04-15):
+
+* Fixed #5: Added default style for colored issue links.
+* Introduced `$tracker-colors-map` and removed `$tracker-X-bg` variables.
+  See d220db1 comments for more details.
+* Fixed #6: Added default padding for table cells.
+
+v1.4.1 (2015-04-14):
+
+* Fixed #3: Closed tasks will be more appreciable.
+
+v1.4.0 (2015-04-10):
+
++ Introduced option `$wiki-page-more-vertical-space` (by default `true`) to improve wiki pages' readability even more
+* Fixed bottom margin of `pre` tag
++ Added a few helper classes from Bootstrap
+* WYSIWYG's icons will squeeze a little bit on smaller screens
+* Images in headers will be aligned to the middle vertically
++ Introduced `text-normal` class for resetting font's weight
++ Added class `toc-active-prev` that will "highlight" TOC as "active".
+* Fixed #2: Make sure that `.sort` with Font Awesome icons won't have background image
+* Fixed attachments div's layout for wiki pages
+
+For more details, see [release v1.4.0](https://github.com/mrliptontea/PurpleMine2/releases/tag/v1.4.0)
+
+v1.3.0 (2015-04-01):
+
+* Backlogs: make it possible to click on empty field
+* Corrected issue form columns widths so they will be equal in all fieldsets
+* Changesets will look similar to issue's journal
++ Improved revision page layout and added Font Awesome icons
++ Improved file content view
+* Fixed #1: Font Awesome icons will no longer break plugins' icons
++ Introduced styles for [People][redmine_crm_people] plugin
+* Enhanced styles for activities list
+* Regular buttons (e.g. `Cancel`) will look like links in dialog windows
+* Fixed look of collapsible arrow in Firefox
++ Overrode Redmine's revision graph function to make it look better
++ Animated collapsible fieldsets
++ Custom image based icons changed to base64 embedded data
+
+v1.2.0 (2015-03-03):
+
+* Fixed .warning style
++ Coloring status on issue page (it'll look like label)
+* Fixed master backlog sub-menu accessibility
++ Changed font weight to normal for sub-projects in project list
+* Fixed watch task path for .js
+- Removed unnecessary classes from .sidebar-toggler
+* Fixed external link icon, when URI contains the word 'edit'
+* Fixed wiki page headers links font-size
++ Changed some trackers default colors
++ Bolded user name on issue page if it's current user
+* Issue's journal appearance changed once again
++ Some improvements in wiki formatting
++ Introduced HistoryTabs for filtering issue journals
+* Improved issue page styles and adjusted default priority colors
+* Backlogs: added delay before hiding backlog menu
+* Changed ancestor project name in top to equal font size, but different weight
+* Fixed context menu position regression introduced by sidebar toggle
+
+v1.1.0 (2015-02-15):
+
++ Changed issue's journal appearance
++ jQuery UI menus look improved
++ Removed box-shadow from boxes
++ Bumped grunt-sass version
++ Toggling sidebar visibility
++ Recompressed images
++ Changelog added
+
+v1.0.0 (2015-02-06):
+
+Initial version

Gruntfile.js

@@ -1,66 +1,85 @@
-module.exports = function(grunt) {
-
-  grunt.initConfig({
-    src: "src/",
-
-    sass: {
-      options: {
-        sourceMap: false,
-        outputStyle: 'compressed'
-      },
-      dist: {
-        files: {
-          'stylesheets/application.css': '<%= src %>sass/application.scss'
-        }
-      },
-      redmine_backlogs: {
-        files: {
-          'plugins/redmine_backlogs/global.css':
-            '<%= src %>sass/plugins/redmine_backlogs/global.scss',
-          'plugins/redmine_backlogs/master_backlog.css':
-            '<%= src %>sass/plugins/redmine_backlogs/master_backlog.scss',
-          'plugins/redmine_backlogs/statistics.css':
-            '<%= src %>sass/plugins/redmine_backlogs/statistics.scss',
-          'plugins/redmine_backlogs/taskboard.css':
-            '<%= src %>sass/plugins/redmine_backlogs/taskboard.scss',
-          'plugins/redmine_backlogs/jquery/jquery-ui.css':
-            '<%= src %>sass/plugins/redmine_backlogs/jquery/jquery-ui.scss',
-          'plugins/redmine_backlogs/jquery/jquery.multiselect.css':
-            '<%= src %>sass/plugins/redmine_backlogs/jquery/jquery.multiselect.scss',
-          'plugins/redmine_backlogs/jquery/jquery.qtip.css':
-            '<%= src %>sass/plugins/redmine_backlogs/jquery/jquery.qtip.scss'
-        }
-      }
-    },
-
-    uglify: {
-      build: {
-        src: [
-          '<%= src %>javascripts/modules/*.js',
-          '<%= src %>javascripts/theme.js'
-        ],
-        dest: 'javascripts/theme.js'
-      }
-    },
-
-    watch: {
-      css: {
-        files: ['<%= src %>sass/**/*.scss'],
-        tasks: ['css']
-      },
-      js: {
-        files: ['<%= src %>javascripts/**/*.js'],
-        tasks: ['js']
-      }
-    }
-  });
-
-  grunt.loadNpmTasks('grunt-sass');
-  grunt.loadNpmTasks('grunt-contrib-watch');
-  grunt.loadNpmTasks("grunt-contrib-uglify");
-
-  grunt.registerTask('css', ['sass']);
-  grunt.registerTask('js', ['uglify']);
-
-  grunt.registerTask('default', ['css', 'js']);
-};
+module.exports = function (grunt) {
+  grunt.initConfig({
+    src: 'src/',
+
+    sass: {
+      options: {
+        implementation: require('sass'),
+        sourceMap: false,
+        outputStyle: 'compressed',
+        functions: {
+          'inline-svg($path, $selectors: null)': require('@liquid-js/sass-inline-svg')('./svg', {
+            optimize: true,
+            encodingFormat: 'uri'
+          })
+        }
+      },
+
+      theme: {
+        files: {
+          'stylesheets/application.css': '<%= src %>sass/application.scss'
+        }
+      },
+
+      plugins: {
+        files: [
+          {
+            expand: true,
+            cwd: '<%= src %>sass/plugins/',
+            src: '**/*.scss',
+            dest: 'plugins/',
+            ext: '.css',
+            extDot: 'last'
+          }
+        ]
+      }
+    },
+
+    postcss: {
+      options: {
+        processors: [
+          require('autoprefixer')()
+        ]
+      },
+
+      all: {
+        src: [
+          'stylesheets/*.css',
+          'plugins/**/*.css'
+        ]
+      }
+    },
+
+    uglify: {
+      theme: {
+        src: [
+          '<%= src %>javascripts/modules/*.js',
+          '<%= src %>javascripts/theme.js'
+        ],
+        dest: 'javascripts/theme.js'
+      }
+    },
+
+    watch: {
+      css: {
+        files: ['<%= src %>sass/**/*.scss'],
+        tasks: ['css']
+      },
+
+      js: {
+        files: ['<%= src %>javascripts/**/*.js'],
+        tasks: ['js']
+      }
+    }
+  })
+
+  grunt.loadNpmTasks('grunt-sass')
+  grunt.loadNpmTasks('grunt-postcss')
+  grunt.loadNpmTasks('grunt-contrib-watch')
+  grunt.loadNpmTasks('grunt-contrib-uglify')
+
+  grunt.registerTask('css', ['sass', 'postcss'])
+  grunt.registerTask('js', ['uglify'])
+
+  grunt.registerTask('default', ['css', 'js'])
+}

LICENSE

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

README.md

@@ -1,10 +1,12 @@
 # PurpleMine 2
 
-A free Redmine theme for modern browsers.
+A free Redmine 3.0+ theme written in SCSS.
 
-![Screenshot](https://github.com/HolonGlobe/PurpleMine2/raw/master/screenshots/issues-list.png)
+![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)
 
-Compatible with Redmine 2.5+ and browsers: IE9+, latest Firefox and Google Chrome (others were not tested).
+---
+
+![Screenshot](https://github.com/mrliptontea/PurpleMine2/raw/master/screenshots/issues.png)
 
 It's written in [SCSS]. It uses [normalize.css] and benefits from some parts of [Bootstrap][bootstrap-sass] like mixins, structure, and stuff.
 
@@ -14,13 +16,13 @@ It's written in [SCSS]. It uses [normalize.css] and benefits from some parts of
 * Github-like wiki content look,
 * Sidebar moved to the left for better ergonomy,
 * Coloring trackers links (on lists, issue pages and even in the wiki content),
-* Highlighting issues priority on the list and on the issue page,
+* Jira-inspired priority icons,
 * Toggling sidebar visibility,
 * Easy to customize via variables.
 
 ## How install it
 
-To install PurpleMine, just download [.zip](https://github.com/HolonGlobe/PurpleMine2/archive/master.zip) and unpack it to your Redmine's `public/themes` folder.
+To install PurpleMine, just download [.zip](https://github.com/mrliptontea/PurpleMine2/archive/master.zip) and unpack it to your Redmine's `public/themes` folder.
 
 Then go to Redmine > Administration > Settings > Display and select PurpleMine2 from the list and save the changes.
 
@@ -28,70 +30,36 @@ Then go to Redmine > Administration > Settings > Display and select PurpleMine2
 
 This theme also features a new look for [Redmine Backlogs][redmine_backlogs] plugin. To install it, simply copy stylesheets from `PurpleMine2/plugins/redmine_backlogs` and overwrite files in `{redmine}/plugins/redmine_backlogs/assets/stylesheets` and restart Redmine.
 
-Also, [Redmine Time Tracker][redmine_time_tracker] plugin should look nice with PurpleMine.
+Also, [Redmine Time Tracker][redmine_time_tracker] and [Redmine People][redmine_crm_people] plugins should look nice with PurpleMine.
 
 ## How to customize it
 
 If you want to customize PurpleMine to your needs, first, make sure that you have installed [node.js](http://nodejs.org/) and `npm` is available in your terminal.
 
-If haven't yet, you need to install grunt:
-
-    npm install grunt-cli -g
-
 Then, from the directory that contains PurpleMine run:
 
     npm install
 
 Now all the dependencies should be ready to use. Run one more command:
 
-    grunt watch
+    npm run watch
 
-And now the grunt is watching for changes in files placed in `src/` folder. Just change what you need, and it'll run SASS preprocessor automatically.
+And now the grunt is watching for changes in files placed in `src/` folder. Just change what you need, and it'll run Sass preprocessor automatically.
 
-Regrettably, optional file include is not possible in SASS, so I would recommend creating a new file, e.g. `_my_variables.scss` and importing it a the beginning of the `application.scss` file. That way all the variables with the `!default` flag could be overridden.
+Regrettably, optional file include is not possible in Sass, so I would recommend creating a new file, e.g. `src/sass/_custom-variables.scss` and importing it a the beginning of the `application.scss` file. That way all the variables with the `!default` flag could be overridden.
+
+The path `src/sass/_custom-variables.scss` is added to `.gitignore` so it should make upgrading PurpleMine with keeping your changes rather painless, given that the only thing you changed in PurpleMine's source was adding this one line with `@import "custom-variables";`.
+
+If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remember to include your `_custom-variables.scss` in `src/sass/plugins/redmine_backlogs/_common.scss`.
 
 ## Changelog
 
-v1.2.0 (2015-03-03):
-
-* Fixed .warning style
-+ Coloring status on issue page (it'll look like label)
-* Fixed master backlog sub-menu accessibility
-+ Changed font weight to normal for sub-projects in project list
-* Fixed watch task path for .js
-- Removed unnecessary classes from .sidebar-toggler
-* Fixed external link icon, when URI contains the word 'edit'
-* Fixed wiki page headers links font-size
-+ Changed some trackers default colors
-+ Bolded user name on issue page if it's current user
-* Issue's journal appearance changed once again
-+ Some improvements in wiki formatting
-+ Introduced HistoryTabs for filtering issue journals
-* Improved issue page styles and adjusted default priority colors
-* Backlogs: added delay before hiding backlog menu
-* Changed ancestor project name in top to equal font size, but different weight
-* Fixed context menu position regression introduced by sidebar toggle
-
-v1.1.0 (2015-02-15):
-
-+ Changed issue's journal appearance
-+ jQuery UI menus look improved
-+ Removed box-shadow from boxes
-+ Bumped grunt-sass version
-+ Toggling sidebar visibility
-+ Recompressed images
-+ Changelog added
-
-v1.0.0 (2015-02-06):
-
-Initial version
-
-## License
-
-[WTFPL](http://www.wtfpl.net/)
+[Changelog](./CHANGELOG.md).
 
 [SCSS]: http://sass-lang.com/
 [normalize.css]: https://github.com/necolas/normalize.css
 [bootstrap-sass]: https://github.com/twbs/bootstrap-sass
 [redmine_backlogs]: https://github.com/backlogs/redmine_backlogs
-[redmine_time_tracker]: https://github.com/hicknhack-software/redmine_time_tracker
+[redmine_time_tracker]: https://github.com/hicknhack-software/redmine_time_tracker
+[redmine_crm_people]: http://www.redminecrm.com/projects/people/
+[stuff_to_do]: https://github.com/raafael911/stuff_to_do_plugin

package.json

@@ -1,27 +1,60 @@
 {
-  "name": "PurpleMine2",
-  "version": "2.0.0",
-  "description": "A free Redmine 2.5+ theme written in SASS",
+  "name": "purplemine",
+  "description": "A free Redmine 3.0+ theme written in SCSS",
   "keywords": [
     "redmine",
     "theme",
     "sass",
     "scss"
   ],
-  "author": "HolonGlobe",
+  "author": "mrliptontea",
   "repository": {
     "type": "git",
-    "url": "git@github.com:HolonGlobe/PurpleMine2.git"
+    "url": "git@github.com:mrliptontea/PurpleMine2.git"
   },
-  "license": "WTFPL",
+  "license": "MIT",
   "bugs": {
-    "url": "https://github.com/HolonGlobe/PurpleMine2/issues"
+    "url": "https://github.com/mrliptontea/PurpleMine2/issues"
+  },
+  "homepage": "https://github.com/mrliptontea/PurpleMine2",
+  "scripts": {
+    "build": "grunt",
+    "watch": "grunt watch",
+    "lint:js": "eslint src/javascripts/",
+    "lint:sass": "stylelint src/sass/**/*.scss",
+    "lint": "npm run -S lint:js && npm run -S lint:sass"
+  },
+  "dependencies": {
+    "@liquid-js/sass-inline-svg": "^2.0.0",
+    "autoprefixer": "^9.8.6",
+    "grunt": "^1.4.0",
+    "grunt-contrib-uglify": "^5.0.1",
+    "grunt-contrib-watch": "^1.1.0",
+    "grunt-postcss": "^0.9.0",
+    "grunt-sass": "^3.1.0",
+    "sass": "^1.34.0"
   },
-  "homepage": "https://github.com/HolonGlobe/PurpleMine2",
   "devDependencies": {
-    "grunt": "^0.4.5",
-    "grunt-contrib-uglify": "^0.7.0",
-    "grunt-contrib-watch": "^0.6.1",
-    "grunt-sass": "^0.18.0"
+    "eslint": "^7.27.0",
+    "eslint-config-standard": "^14.1.1",
+    "eslint-plugin-import": "^2.23.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.3.1",
+    "eslint-plugin-standard": "^4.1.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "stylelint": "^13.13.1",
+    "stylelint-order": "^4.1.0",
+    "stylelint-scss": "^3.19.0"
+  },
+  "browserslist": [
+    "last 2 versions",
+    "> 1%",
+    "not dead"
+  ],
+  "husky": {
+    "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:0.92em}.ui-multiselect-header ul li{padding:0 10px 0 0;float:left}.ui-multiselect-header a{text-decoration:none}.ui-multiselect-header a:hover{text-decoration:underline}.ui-multiselect-header span.ui-icon{float:left}.ui-multiselect-header li.ui-multiselect-close{padding-right:0;float:right;text-align:right}.ui-multiselect-menu{display:none;position:absolute;padding:3px;text-align:left;box-shadow:0 1px 2px rgba(0,0,0,0.1),0 3px 8px rgba(0,0,0,0.07);z-index:10000}.ui-multiselect-checkboxes{position:relative;padding-right:2px;overflow-y:scroll}.ui-multiselect-checkboxes input[type="checkbox"]{top:0;margin:3px 0 0 -20px;float:left}.ui-multiselect-checkboxes input[type="checkbox"]:focus{outline:none}.ui-multiselect-checkboxes label{display:block;padding:3px 1px;padding-left:26px;border:1px solid transparent;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui-multiselect-checkboxes label input{position:relative;top:1px}.ui-multiselect-checkboxes li{clear:both;font-size:0.92em}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label{margin-bottom:2px;border-bottom:1px solid #ccc;font-weight:bold;text-align:center}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a{display:block;margin:1px 0;padding:3px;text-decoration:none}* html .ui-multiselect-checkboxes label{border:0 none}
+.ui-multiselect{padding:2px 0 2px 4px;text-align:left}.ui-multiselect span.ui-icon{float:right}.ui-multiselect-single .ui-multiselect-checkboxes input{position:absolute !important;top:auto !important;left:-9999px}.ui-multiselect-single .ui-multiselect-checkboxes label{padding:5px !important}.ui-multiselect-header{margin-bottom:3px;padding:3px}.ui-multiselect-header ul{font-size:.92em}.ui-multiselect-header ul li{padding:0 10px 0 0;float:left}.ui-multiselect-header a{text-decoration:none}.ui-multiselect-header a:hover{text-decoration:underline}.ui-multiselect-header span.ui-icon{float:left}.ui-multiselect-header li.ui-multiselect-close{padding-right:0;float:right;text-align:right}.ui-multiselect-menu{box-shadow:0 5px 8px -2px rgba(0,0,0,.25),0 1px 2px rgba(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 #dadce6;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{position:relative;padding:10px;border:1px solid #ccc;background-color:#fff;color:#555555;font-size:0.92em;text-align:left;word-wrap:break-word;box-shadow:0 2px 2px rgba(0,0,0,0.2);overflow:hidden}.ui-tooltip-tip{border-color:#ccc;background-color:#fff}.ui-tooltip-tip{position:absolute;margin:0 auto;border:0 none;background:transparent;overflow:hidden;z-index:10}
+.qtip{position:absolute;top:-31000px;left:-31000px;width:auto;max-width:500px;outline:none}.ui-tooltip-content{box-shadow:0 5px 8px -2px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.3);position:relative;padding:10px;overflow:hidden;border:1px solid #d1d3e0;background-color:#fff;color:#3e4359;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}

plugins/redmine_backlogs/statistics.css

@@ -1 +1 @@
-table th,table td{padding:5px 8px}.ui-widget{margin-bottom:20px}.score{display:inline-block;width:1.5em;font-size:large;text-align:center}.score_0{background-color:#f00}.score_1{background-color:#ff5300}.score_2{background-color:#ff8100}.score_3{background-color:#ffa100}.score_4{background-color:#fb0}.score_5{background-color:#ffd300}.score_6{background-color:#ffec00}.score_7{background-color:#e9fb00}.score_8{background-color:#b1f100}.score_9{background-color:#74e600}.score_10{background-color:#0c0}
+table th,table td{padding:5px 8px}.ui-widget{margin-bottom:20px}.score{display:inline-block;width:1.5em;font-size:large;text-align:center}.score_0{background-color:red}.score_1{background-color:#ff5300}.score_2{background-color:#ff8100}.score_3{background-color:#ffa100}.score_4{background-color:#fb0}.score_5{background-color:#ffd300}.score_6{background-color:#ffec00}.score_7{background-color:#e9fb00}.score_8{background-color:#b1f100}.score_9{background-color:#74e600}.score_10{background-color:#0c0}

src/javascripts/modules/HistoryTabs.js

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

src/javascripts/modules/MenuCollapse.js

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

src/javascripts/modules/RevisionGraph.js

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

src/javascripts/modules/SidebarToggler.js

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

src/javascripts/theme.js

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

src/sass/_functions.scss

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

src/sass/_mixins.scss

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

src/sass/_variables.scss

@@ -1,78 +1,149 @@
+@use "sass:math";
+
 //
 // Variables
 // --------------------------------------------------
 
+// stylelint-disable indentation
 
 //== Some key attributes
 //
 
 $fixed-layout:                  false !default;
+$css-grid-layout:               false !default;
+$flexbox-layout:                true !default;
 $sidebar-position:              left !default;
-$color-priorities:              true !default;
+$clean-issues:                  true !default;
 $color-trackers:                true !default;
-$colored-issue:                 true !default;
 $color-status:                  true !default;
+$color-priorities:              false !default;
+$priority-icon:                 true !default;
 $use-gravatars:                 true !default;
-$use-font-awesome:              true !default;
+$use-logo:                      false !default;
+$use-retina-logo:               false !default;
+$use-project-tiles:             true !default;
 $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
 //
 
-$gray-base:                     #808080 !default;
-$gray-darkest:                  darken($gray-base, 40%) !default;
-$gray-darker:                   darken($gray-base, 33%) !default;
-$gray-dark:                     darken($gray-base, 17%) !default;
-$gray:                          $gray-base !default;
-$gray-light:                    lighten($gray-base, 17%) !default;
-$gray-lighter:                  lighten($gray-base, 35%) !default;
-$gray-lightest:                 lighten($gray-base, 46%) !default;
+$blue:                          #0065ff !default;
+$indigo:                        #4e65e5 !default;
+$purple:                        #614ba6 !default;
+$pink:                          #eb5286 !default;
+$red:                           #e5123d !default;
+$orange:                        #fc8c12 !default;
+$yellow:                        #ffc107 !default;
+$green:                         #029934 !default;
+$teal:                          #00b3ad !default;
 
-$brand-primary:                 #584492 !default;
-$brand-text:                    #fff !default;
-$brand-accent:                  #deddef !default;
+$white:                         #fff !default;
+$black:                         #000 !default;
+$gray:                          hsl(hue($indigo), 20%, 85%) !default;
 
-$brand-success:                 #019851 !default;
-$brand-info:                    #409ae3 !default;
-$brand-warning:                 #ed820c !default;
-$brand-danger:                  #e74c3c !default;
+$shade-map: (
+  50:                           87.5%,
+  100:                          80%,
+  200:                          65%,
+  300:                          40%,
+  400:                          20%,
+  500:                          0%,
+  600:                          20%,
+  700:                          40%,
+  800:                          65%,
+  900:                          80%,
+  950:                          87.5%
+) !default;
 
-$state-success:                 #b5fbb7 !default;
-$state-info:                    #97cefb !default;
-$state-warning:                 #ffd699 !default;
-$state-danger:                  #f7a6a4 !default;
+@function shade($color, $shade: 500) {
+  $mixer: if($shade < 500, $white, $black);
+  $saturation: if($shade < 500, 0, math.div($shade - 500, 20));
+  @return saturate(mix($mixer, $color, map-get($shade-map, $shade)), $saturation);
+}
+
+$gray-50:                       shade($gray, 50) !default;
+$gray-100:                      shade($gray, 100) !default;
+$gray-200:                      shade($gray, 200) !default;
+$gray-300:                      shade($gray, 300) !default;
+$gray-400:                      shade($gray, 400) !default;
+$gray-500:                      $gray !default;
+$gray-600:                      shade($gray, 600) !default;
+$gray-700:                      shade($gray, 700) !default;
+$gray-800:                      shade($gray, 800) !default;
+$gray-900:                      shade($gray, 900) !default;
+$gray-950:                      shade($gray, 950) !default;
+
+$brand-primary:                 $purple !default;
+$brand-text:                    $white !default;
+$brand-accent:                  shade($brand-primary, 100) !default;
+
+$brand-success:                 $green !default;
+$brand-info:                    $blue !default;
+$brand-warning:                 $orange !default;
+$brand-danger:                  $red !default;
+
+$state-success:                 shade($green, 100) !default;
+$state-info:                    shade($blue, 100) !default;
+$state-warning:                 shade($orange, 100) !default;
+$state-danger:                  shade($red, 100) !default;
 
 
 //== Scaffolding
 //
 
-$body-bg:                       #fff !default;
-$text-color:                    $gray-dark !default;
+$body-bg:                       $white !default;
+$text-color:                    $gray-800 !default;
 
-$link-color:                    #4183c4 !default;
-$link-hover-color:              darken($link-color, 10%) !default;
+$link-color:                    shade($blue, 600) !default;
+$link-hover-color:              $blue !default;
 $link-hover-decoration:         underline !default;
 $link-closed-decoration:        line-through !default;
-$link-color-issue-closed:       $gray !default;
-$link-color-project-closed:     $gray !default;
-$link-color-user-locked:        $gray !default;
+$link-color-issue-closed:       $gray-700 !default;
+$link-color-project-closed:     $gray-700 !default;
+$link-color-user-locked:        $gray-700 !default;
 
 
 //== Typography
 //
 
-$font-family-sans-serif:        "Helvetica Neue", Helvetica, Arial, freesans, sans-serif !default;
+$font-family-sans-serif:        system-ui,
+                                /* macOS 10.11-10.12 */ -apple-system,
+                                /* Windows 6+ */ Segoe UI,
+                                /* Android 4+ */ Roboto,
+                                /* Ubuntu 10.10+ */ Ubuntu,
+                                /* Gnome 3+ */ Cantarell,
+                                /* KDE Plasma 5+ */ Noto Sans,
+                                /* fallback */ sans-serif,
+                                /* macOS emoji */ "Apple Color Emoji",
+                                /* Windows emoji */ "Segoe UI Emoji",
+                                /* Windows emoji */ "Segoe UI Symbol",
+                                /* Linux emoji */ "Noto Color Emoji" !default;
+
+$font-family-monospace:         /* macOS 10.10+ */ Menlo,
+                                /* Windows 6+ */ Consolas,
+                                /* Android 4+ */ Roboto Mono,
+                                /* Ubuntu 10.10+ */ Ubuntu Monospace,
+                                /* KDE Plasma 5+ */ Noto Mono,
+                                /* KDE Plasma 4+ */ Oxygen Mono,
+                                /* Linux/OpenOffice fallback */ Liberation Mono,
+                                /* fallback */ monospace !default;
 
-$font-family-monospace:         Consolas, "Liberation Mono", Menlo, "Courier New", Courier, monospace !default;
 $font-family-base:              $font-family-sans-serif !default;
+$font-weight-normal:            normal !default;
+$font-weight-semi-bold:         500 !default;
+$font-weight-bold:              600 !default;
 
 $font-size-base:                14px !default;
 $font-size-large:               1.285em !default;
 $font-size-large-px:            18px !default;
-$font-size-small:               .86em !default;
-$font-size-small-px:            12px !default;
+$font-size-small-unitless:      .86 !default;
+$font-size-small:               $font-size-small-unitless * 1em !default;
+$font-size-small-px:            floor($font-size-small-unitless * $font-size-base) !default;
 
 $font-size-h1:                  2.25em !default;
 $font-size-h2:                  1.75em !default;
@@ -85,16 +156,29 @@ $line-height-base:              1.428571429 !default; // 20/14
 $line-height-large:             1.33 !default;
 $line-height-computed:          floor(($font-size-base * $line-height-base)) !default; // ~20px
 
-$headings-font-weight:          700 !default;
+$headings-font-weight:          600 !default;
 $headings-line-height:          1.4 !default;
+$headings-anchor-color:         $gray-400 !default;
+$headings-anchor-color-active:  $gray-600 !default;
 
 
 //== Wiki
 //
 
-$wiki-text:                     #333 !default;
+$wiki-text:                     $gray-950 !default;
 $wiki-font-size:                16px !default;
 $wiki-line-height:              1.6 !default;
+$wiki-preview-bg:               $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;
 
 
 //== Components
@@ -114,14 +198,13 @@ $border-radius-base:            3px !default;
 $border-radius-large:           4px !default;
 $border-radius-small:           2px !default;
 
-$hr-border:                     $gray-light !default;
-$abbr-border-color:             $gray-light !default;
-$blockquote-border-color-fallback: $gray-lighter !default;
-$blockquote-border-color:       rgba(#000, .15) !default;
+$hr-border:                     $gray-600 !default;
+$abbr-border-color:             $gray-600 !default;
+$blockquote-border-color:       rgba($black, .15) !default;
 
-$component-color:               $gray-dark !default;
-$component-bg:                  lighten($gray-lightest, 2%) !default;
-$component-border:              lighten($gray-lighter, 2%) !default;
+$component-color:               $text-color !default;
+$component-bg:                  $gray-50 !default;
+$component-border:              $gray-300 !default;
 
 $component-active-color:        $brand-text !default;
 $component-active-bg:           $brand-primary !default;
@@ -129,6 +212,12 @@ $component-active-border:       $brand-primary !default;
 
 $font-size-list:                .92em !default;
 
+$transition-time:               50ms !default;
+$transition-time-long:          150ms !default;
+
+$collapsible-animation-time:    300ms !default;
+$collapsible-max-height:        10000px !default;
+
 
 //== Tables
 //
@@ -136,36 +225,151 @@ $font-size-list:                .92em !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;
+$table-list-color-even-rows:    false !default;
+$table-list-highlight-rows:     true !default;
+
 $table-bg:                      transparent !default;
-$table-bg-accent:               rgba(#000, .03) !default;
-$table-bg-hover:                #f1f1f1 !default;
+$table-accent-factor:           .15 !default;
+$table-hover-factor:            .4 !default;
+$table-bg-accent:               rgba($gray-500, $table-accent-factor) !default;
+$table-bg-hover:                rgba($gray-500, $table-hover-factor) !default;
 $table-bg-active:               $table-bg-hover !default;
 
-$table-border-color:            darken($body-bg, 13.5%) !default;
+$table-border-color:            $gray-300 !default;
+
+$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
+//
+
+$status-default-bg:             $brand-primary !default;
+$status-default-color:          $brand-text !default;
+$status-default-colors-map: (
+  status-1: (
+    background:                 shade($blue, 500),
+    color:                      $white
+  ),
+  closed: (
+    background:                 shade($red, 500),
+    color:                      $white
+  )
+) !default;
+$status-custom-colors-map:      () !default;
+$status-colors-map:             map-merge($status-default-colors-map, $status-custom-colors-map);
 
 
 //== Trackers priorities
 //
 
-$priority-lowest-bg:            #dff4d0 !default;
-$priority-lowest-text:          #676 !default;
-$priority-lowest-link:          #096 !default;
+$priority-icon-size:            14px !default;
+$priority-icon-space:           5px !default;
+$priority-default-icons-map: (
+  lowest: (
+    icon:                       "priority-minor.svg",
+    color:                      $green
+  ),
+  low2: (
+    icon:                       "priority-lowest.svg",
+    color:                      mix($teal, $green)
+  ),
+  low3: (
+    icon:                       "priority-low.svg",
+    color:                      $teal
+  ),
+  default: (
+    icon:                       "priority-medium.svg",
+    color:                      $blue
+  ),
+  high5: (
+    icon:                       "priority-high.svg",
+    color:                      $purple
+  ),
+  high4: (
+    icon:                       "priority-high.svg",
+    color:                      $orange
+  ),
+  high3: (
+    icon:                       "priority-highest.svg",
+    color:                      mix($red, $orange)
+  ),
+  high2: (
+    icon:                       "priority-major.svg",
+    color:                      $red
+  ),
+  highest: (
+    icon:                       "priority-critical.svg",
+    color:                      shade($red, 600)
+  )
+) !default;
+$priority-custom-icons-map:     () !default;
+$priority-icons-map:            map-merge($priority-default-icons-map, $priority-custom-icons-map);
 
-$priority-default-bg:           #fff !default;
-$priority-default-text:         $text-color !default;
-$priority-default-link:         $link-color !default;
-
-$priority-high3-bg:             #d5eaff !default;
-$priority-high3-text:           #556 !default;
-$priority-high3-link:           #05a !default;
-
-$priority-high2-bg:             #ffe1d7 !default;
-$priority-high2-text:           #855 !default;
-$priority-high2-link:           #b04 !default;
-
-$priority-highest-bg:           #ffa5a5 !default;
-$priority-highest-text:         #944 !default;
-$priority-highest-link:         #a03 !default;
+$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
@@ -174,143 +378,252 @@ $priority-highest-link:         #a03 !default;
 $tracker-inline-padding:        1px 5px !default;
 $tracker-list-padding:          0 6px !default;
 
-$tracker-1-bg:                  $brand-danger !default;
-$tracker-1-text:                $brand-text !default;
+$tracker-default-bg:            $gray-700 !default;
+$tracker-default-text:          $white !default;
 
-$tracker-2-bg:                  $brand-info !default;
-$tracker-2-text:                $brand-text !default;
-
-$tracker-3-bg:                  $brand-success !default;
-$tracker-3-text:                $brand-text !default;
-
-$tracker-4-bg:                  $brand-primary !default;
-$tracker-4-text:                $brand-text !default;
-
-$tracker-5-bg:                  $brand-warning !default;
-$tracker-5-text:                $brand-text !default;
-
-$tracker-6-bg:                  mix($brand-success, $brand-info, 50%) !default;
-$tracker-6-text:                $brand-text !default;
-
-$tracker-7-bg:                  mix($brand-primary, $brand-warning, 50%) !default;
-$tracker-7-text:                $brand-text !default;
+$tracker-default-colors-map: (
+  1: (
+    background:                 $red,
+    color:                      $white
+  ),
+  2: (
+    background:                 $blue,
+    color:                      $white
+  ),
+  3: (
+    background:                 $green,
+    color:                      $white
+  ),
+  4: (
+    background:                 $purple,
+    color:                      $white
+  ),
+  5: (
+    background:                 $orange,
+    color:                      $white
+  ),
+  6: (
+    background:                 $teal,
+    color:                      $white
+  ),
+  7: (
+    background:                 $indigo,
+    color:                      $white
+  )
+) !default;
+$tracker-custom-colors-map:     () !default;
+$tracker-colors-map:            map-merge($tracker-default-colors-map, $tracker-custom-colors-map);
 
 
 //== Diffs
 //
 
-$diff-out-color:                #430;
-$diff-out-bg:                   #ffeaaa;
-$diff-out-bg-light:             #ffefbf;
+$diff-out-bg:                   saturate(shade($red, 100), 50%) !default;
+$diff-out-bg-light:             rgba($diff-out-bg, .4) !default;
+
+$diff-in-bg:                    saturate(shade($green, 100), 50%) !default;
+$diff-in-bg-light:              rgba($diff-in-bg, .4) !default;
+
+
+//== Journal changes
+//
+
+$journal-old-value-color:       saturate(shade($orange, 800), 25%) !default;
+$journal-old-value-bg:          saturate(shade($orange, 50), 50%) !default;
+$journal-new-value-color:       saturate(shade($green, 800), 25%) !default;
+$journal-new-value-bg:          saturate(shade($green, 50), 50%) !default;
+
+
+//== Changesets
+//
+
+$changeset-added-color:         $green !default;
+$changeset-modified-color:      $orange !default;
+$changeset-copied-color:        $purple !default;
+$changeset-renamed-color:       $blue !default;
+$changeset-deleted-color:       $red !default;
 
-$diff-in-color:                 #350;
-$diff-in-bg:                    #bffbbf;
-$diff-in-bg-light:              #d8fcd8;
 
 //== Buttons
 //
 
 $btn-font-weight:               normal !default;
+$btn-padding-vertical:          3px !default;
+$btn-padding-horizontal:        12px !default;
+$btn-padding-horizontal-small:  8px !default;
 
-$btn-default-color:             $gray-darkest !default;
-$btn-default-bg:                $gray-lightest !default;
-$btn-default-border:            $gray-lighter !default;
+$btn-link-color:                $link-color !default;
+$btn-link-bg:                   $body-bg !default;
+$btn-link-border:               $body-bg !default;
 
-$btn-primary-color:             #fff !default;
-$btn-primary-bg:                $brand-info !default;
-$btn-primary-border:            darken($btn-primary-bg, 5%) !default;
+$btn-default-color:             $gray-900 !default;
+$btn-default-bg:                $gray-100 !default;
+$btn-default-border:            $gray-500 !default;
+$btn-default-icon-color:        $gray-700 !default;
 
-$btn-success-color:             #fff !default;
-$btn-success-bg:                $brand-success !default;
-$btn-success-border:            darken($btn-success-bg, 5%) !default;
+$btn-primary-color:             $white !default;
+$btn-primary-bg:                $blue !default;
+$btn-primary-border:            $btn-primary-bg !default;
+
+$btn-success-color:             $white !default;
+$btn-success-bg:                $green !default;
+$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: (
+  default: (
+    normal:                     shade($brand-info, 600),
+    hover:                      shade($brand-info, 500)
+  ),
+  success: (
+    normal:                     shade($brand-success, 600),
+    hover:                      shade($brand-success, 500)
+  ),
+  danger: (
+    normal:                     shade($brand-danger, 600),
+    hover:                      shade($brand-danger, 500)
+  )
+) !default;
 
 
 //== Highlights
 //
 
-$highlight-bg:                  #fff9c8 !default;
-$highlight-border:              #ccb37b !default;
-$highlight-text:                #755e40 !default;
-$highlight-link:                #005f97 !default;
+$highlight-bg:                  shade($yellow, 200) !default;
+$highlight-border:              shade($yellow, 600) !default;
+$highlight-text:                shade($yellow, 800) !default;
+$highlight-link:                mix($yellow, $link-color) !default;
 
 
 //== Forms
 //
 
-$input-bg:                      #fff !default;
-$input-bg-disabled:             $gray-lighter !default;
+$input-bg:                      $white !default;
+$input-bg-disabled:             $gray-300 !default;
 
-$input-color:                   $gray-dark !default;
-$input-border:                  #ccc !default;
+$input-color:                   $text-color !default;
+$input-border:                  $gray-500 !default;
 
 $input-border-radius:           $border-radius-small !default;
 $input-border-radius-large:     $border-radius-large !default;
 
-$input-border-focus:            #51a7e8 !default;
-$input-color-placeholder:       #999 !default;
+$input-border-focus:            saturate($brand-primary, 25%) !default;
+$input-border-focus-alpha:      .6 !default;
+$input-shadow-focus-alpha:      .2 !default;
+$input-color-placeholder:       $gray-600 !default;
 
-$input-padding-vertical:        3px;
-$input-padding-horizontal:      8px;
+$input-padding-vertical:        $btn-padding-vertical !default;
+$input-padding-horizontal:      8px !default;
 
 $input-height-base:             ($line-height-computed + ($input-padding-vertical * 2) + 2) !default;
 
-$label-width:                   160px;
-$label-wide-width:              280px;
-$label-space:                   10px;
+$label-width:                   160px !default;
+$label-wide-width:              280px !default;
+$label-space:                   10px !default;
 
-$legend-color:                  $gray-dark !default;
-$legend-border-color:           #e5e5e5 !default;
+$legend-color:                  $gray-800 !default;
+$legend-border-color:           $gray-200 !default;
 
+$check-input-gutter:            18px !default;
+$check-input-margin-vertical:   3px !default;
+$check-input-margin-btn-v:      7px !default;
+$check-input-margin-horizontal: 8px !default;
+
+$check-list-max-height:         20 * $line-height-computed;
+$check-list-offset-top:         $input-padding-vertical + 1px;
 
 //== Top
 //
 
-$top-menu-bg:                   darken($brand-primary, 15%) !default;
-$top-menu-text:                 $brand-accent !default;
-$top-menu-link:                 $brand-accent !default;
-$top-menu-link-hover:           $brand-text !default;
+$top-menu-bg:                   shade($brand-primary, 700) !default;
+$top-menu-text:                 shade($brand-primary, 100) !default;
+$top-menu-link:                 shade($brand-primary, 100) !default;
+$top-menu-link-hover:           shade($brand-primary, 50) !default;
 
 $header-bg:                     $brand-primary !default;
 $header-text:                   $brand-text !default;
 $header-link:                   $brand-text !default;
 $header-root:                   $brand-accent !default;
+$header-padding-vertical:       10px !default;
+$header-padding-horizontal:     $padding-side !default;
 $header-title-size:             $font-size-h3 !default;
 $header-title-line-height:      $line-height-computed * 1.5 !default;
 
-$main-menu-bg:                  $gray-lightest !default;
-$main-menu-link:                $gray-darker !default;
-$main-menu-link-active:         #000 !default;
-$main-menu-border:              $gray-lighter !default;
-$main-menu-shadow-hover:        $gray-light !default;
+$responsive-header-height:      54px !default;
+
+$flyout-menu-bg:                shade($header-bg, 700) !default;
+$flyout-menu-text:              $white !default;
+$flyout-menu-link:              $white !default;
+$flyout-menu-link-active-bg:    shade($header-bg, 50) !default;
+$flyout-menu-link-active:       $text-color !default;
+$flyout-menu-header-bg:         shade($header-bg, 800) !default;
+$flyout-menu-header-border:     shade($header-bg, 800) !default;
+$flyout-menu-header-text:       $white !default;
+
+$quick-search-width:            200px !default;
+$quick-search-border:           shade($header-bg, 800) !default;
+$quick-search-border-focus:     shade($header-bg, 400) !default;
+$quick-search-box-width:        300px !default;
+$quick-search-dropdown-bg:      $body-bg !default;
+$quick-search-dropdown-border:  $gray-400 !default;
+
+$logo-image-width:              60px !default;
+$logo-image-height:             40px !default;
+$logo-position-horizontal:      $header-padding-vertical !default;
+$logo-position-vertical:        center !default;
+$logo-space:                    floor($header-padding-vertical * .5) !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;
+$main-menu-shadow-hover:        $gray-600 !default;
 $main-menu-shadow-width:        3px !default;
 $main-menu-shadow-active:       $brand-primary !default;
 $main-menu-padding-vertical:    $padding-large-vertical !default;
 $main-menu-padding-horizontal:  5px !default;
+$main-menu-dropdown-bg:         $gray-50;
 
 
 //== Pagination
 //
 
-$pagination-color:              $link-color !default;
-$pagination-bg:                 #fff !default;
-$pagination-border:             #ddd !default;
+$pagination-padding-vertical:   $btn-padding-vertical !default;
+$pagination-padding-horizontal: 10px !default;
 
-$pagination-hover-color:        $link-hover-color !default;
-$pagination-hover-bg:           $gray-lightest !default;
-$pagination-hover-border:       #ddd !default;
+$pagination-color:              $gray-900 !default;
+$pagination-bg:                 $gray-200 !default;
+$pagination-border:             $gray-200 !default;
 
-$pagination-active-color:       #fff !default;
+$pagination-hover-color:        $gray-900 !default;
+$pagination-hover-bg:           $gray-300 !default;
+$pagination-hover-border:       $gray-300 !default;
+
+$pagination-active-color:       $brand-text !default;
 $pagination-active-bg:          $brand-primary !default;
 $pagination-active-border:      $brand-primary !default;
 
+$pagination-inactive-color:     $gray-500 !default;
+$pagination-inactive-bg:        $gray-50 !default;
+$pagination-inactive-border:    $gray-100 !default;
+
 
 //== Tabs
 //
 
 $tab-padding-vertical:          5px !default;
 $tab-padding-horizontal:        8px !default;
-$tab-border:                    $gray-lighter !default;
-$tab-hover-bg:                  $gray-lightest !default;
+$tab-border:                    $gray-500 !default;
+$tab-hover-bg:                  $gray-100 !default;
+$tab-hover-text:                $gray-950 !default;
 $tab-hover-border:              $tab-hover-bg !default;
 $tab-active-bg:                 $body-bg !default;
 $tab-active-text:               $text-color !default;
@@ -323,90 +636,119 @@ $tab-active-border:             $tab-border !default;
 $sidebar-width:                 270px !default;
 $sidebar-padding-vertical:      $padding-base-vertical !default;
 $sidebar-padding-horizontal:    $padding-side !default;
-$sidebar-link-hover-bg:         $gray-lightest !default;
+$sidebar-width-computed:        $sidebar-width - ($sidebar-padding-horizontal * 2) - 1px !default;
+$sidebar-link-hover-bg:         $gray-200 !default;
+$sidebar-link-hover-text:       $gray-900 !default;
 $sidebar-link-active-bg:        $body-bg !default;
-$sidebar-link-active-border:    $gray-lighter !default;
-$sidebar-link-active-side:      $brand-danger !default;
-$sidebar-link-active-text:      $gray-darkest !default;
+$sidebar-link-active-border:    $gray-400 !default;
+$sidebar-link-active-side:      $red !default;
+$sidebar-link-active-text:      $gray-950 !default;
 
 
 //== Flash messages (alerts)
 //
 
-$flash-success-bg:              #5cb85c !default;
-$flash-success-border:          darken($flash-success-bg, 5%) !default;
-$flash-success-text:            #fff !default;
-$flash-success-link:            #fff !default;
+$flash-success-bg:              shade($green, 400) !default;
+$flash-success-border:          shade($green, 500) !default;
+$flash-success-text:            $white !default;
+$flash-success-link:            $white !default;
 
-$flash-warning-bg:              #fde3a7 !default;
-$flash-warning-border:          darken($flash-warning-bg, 15%) !default;
-$flash-warning-text:            #b45e10 !default;
-$flash-warning-link:            #a0540e !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-error-bg:                #d9534f !default;
-$flash-error-border:            darken($flash-error-bg, 5%) !default;
-$flash-error-text:              #fff !default;
-$flash-error-link:              #fff !default;
+$flash-warning-bg:              shade($yellow, 200) !default;
+$flash-warning-border:          shade($yellow, 300) !default;
+$flash-warning-text:            shade($yellow, 800) !default;
+$flash-warning-link:            shade($yellow, 900) !default;
+
+$flash-error-bg:                $red !default;
+$flash-error-border:            shade($red, 600) !default;
+$flash-error-text:              $white !default;
+$flash-error-link:              $white !default;
 
 
 //== Progress bars
 //
 
-$progress-bg:                   #fff !default;
+$progress-height:               12px !default;
+$progress-bg:                   rgba($gray-500, .5) !default;
 $progress-bar-bg:               $brand-primary !default;
-$progress-bar-success-bg:       lighten($brand-success, 10%) !default;
-$progress-bar-danger-bg:        lighten($brand-danger, 10%) !default;
-$progress-bar-info-bg:          lighten($brand-info, 20%) !default;
+$progress-bar-success-bg:       $brand-success !default;
+$progress-bar-danger-bg:        $brand-danger !default;
+$progress-bar-info-bg:          $brand-info !default;
 
 
 //== Panels
 //
 
-$panel-body-padding:            15px !default;
-$panel-color:                   #555 !default;
-$panel-bg:                      #f5f5f5 !default;
-$panel-border:                  #ccc !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:                   $text-color !default;
+$panel-bg:                      $gray-50 !default;
+$panel-border:                  $gray-400 !default;
 $panel-border-radius:           $border-radius-base !default;
-$panel-shadow:                  0 1px 2px rgba(#000, .1),
-                                0 3px 8px rgba(#000, .07) !default;
+$panel-shadow:                  0 1px 2px rgba($black, .07),
+                                0 3px 8px rgba($black, .04) !default;
 
 
 //== Tooltips
 //
 
-$tooltip-bg:                    #fff !default;
-$tooltip-border:                #ccc !default;
-$tooltip-text:                  $gray-dark !default;
+$tooltip-bg:                    $white !default;
+$tooltip-border-width:          0 !default;
+$tooltip-border:                $gray-500 !default;
+$tooltip-text:                  $gray-800 !default;
 $tooltip-link:                  $link-color !default;
 
 
 //== Issue
 //
 
-$issue-bg:                      #f9f9f9 !default;
-$issue-border:                  #ccc !default;
+$issue-bg:                      $gray-50 !default;
+$issue-border:                  $gray-500 !default;
 $issue-text:                    $text-color !default;
 
 $issue-padding:                 15px !default;
 $issue-gravatar-size:           50px !default;
-$issue-heading-size:            1.5 !default;
+$issue-heading-size:            1.75 !default;
 
-$issue-attribute-padding-v:     3px;
-$issue-attribute-padding-h:     5px;
+$issue-attribute-padding-v:     3px !default;
+$issue-attribute-padding-h:     5px !default;
 
 
 //== Speech "bubbles"
 //
-$bubble-gravatar-size:          24px;
-$bubble-gravatar-space:         12px;
-$bubble-padding-vertical:       8px;
-$bubble-padding-horizontal:     15px;
+
+$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:     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
 //
 
 $screen-xs:                     480px !default;
+$screen-xs-min:                 $screen-xs !default;
 
 $screen-sm:                     768px !default;
 $screen-sm-min:                 $screen-sm !default;
@@ -421,10 +763,92 @@ $screen-xs-max:                 ($screen-sm-min - 1) !default;
 $screen-sm-max:                 ($screen-md-min - 1) !default;
 $screen-md-max:                 ($screen-lg-min - 1) !default;
 
+$redmine-responsive-max:        899px !default;
+$redmine-responsive-min:        900px !default;
+
+$top-menu-collapse-breakpoint:  $screen-lg-min !default;
+
+
+//== Login form
+//
+
+$login-form-width:              24em !default;
+$login-form-label-width:        8em !default;
+$login-form-box-breakpoint:     $screen-xs-min !default;
+$login-form-adjustments-map: (
+  -2: da en en-GB ko pl tr uk,
+  1: fr hr nl sr-YU sv,
+  2: el eu lt pt sk sr th
+) !default;
+
 
 //== Content widths
 //
 
-$width-sm:                      $screen-sm - ($padding-side * 2);
-$width-md:                      $screen-md - ($padding-side * 2);
-$width-lg:                      $screen-lg - ($padding-side * 2);
+$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: adjust-color($yellow, $hue: 2deg),
+    background: scale-color(adjust-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,18 +1,22 @@
 @import "variables";
+@import "functions";
 @import "mixins";
 
 @import "lib/normalize";
+@import "lib/font-awesome";
+
 
 //== Redmine's core elements
 //
 
 @import "components/base";
+@import "components/badges";
 @import "components/buttons";
 @import "components/forms";
 @import "components/tabs";
 @import "components/pagination";
-@import "components/top";
 @import "components/content";
+@import "components/context-menu";
 @import "components/gravatar";
 @import "components/list";
 @import "components/simple-list";
@@ -20,6 +24,7 @@
 @import "components/login";
 @import "components/admin";
 @import "components/coderay";
+@import "components/rouge";
 @import "components/gantt";
 @import "components/calendar";
 @import "components/progress";
@@ -27,8 +32,12 @@
 @import "components/elements";
 @import "components/jquery-ui";
 @import "components/icons";
+@import "components/dropdown";
+@import "components/top";
 @import "components/jstoolbar";
 @import "components/flash";
+@import "components/image-base64";
+@import "components/responsive";
 @import "components/print";
 
 

src/sass/components/_admin.scss

@@ -3,139 +3,147 @@
 // --------------------------------------------------
 
 #admin-menu {
-    #admin-index > & {
-        ul {
-            margin: 0;
-            padding: 0;
-        }
+  ul:nth-child(n) {
+    li {
+      list-style-type: none;
 
-        li {
-            padding: ($sidebar-padding-vertical + 1px) ($sidebar-padding-horizontal + 3px);
-        }
+      > a:not(.icon-only) {
+        padding-left: $sidebar-padding-horizontal + 5px + $icon-width;
+        background-repeat: no-repeat;
+        background-position: $sidebar-padding-horizontal center;
+      }
+    }
+  }
 
-        a {
-            display: inline-block;
-            padding-left: 8 + 16px;
-            background-position: 0 center;
-        }
+  #admin-index > & {
+    ul {
+      margin: 0;
+      padding: 0;
     }
 
     li {
-        list-style-type: none;
-
-        > a {
-            padding-left: $sidebar-padding-horizontal + 8 + 16px;
-            background-repeat: no-repeat;
-            background-position: $sidebar-padding-horizontal center;
-        }
+      padding: ($sidebar-padding-vertical + 1px) ($sidebar-padding-horizontal + 3px);
     }
+
+    a {
+      display: inline-block;
+      padding-left: 5px + $icon-width;
+      background-position: 0 center;
+    }
+  }
 }
 
 
-/**
- * Groups
- */
+//== Groups
+//
 
 table.members,
 table.memberships {
-    td.roles {
-        width: 45%;
-    }
+  td.roles {
+    width: 45%;
+  }
 }
 
 
-/**
- * Permissions
- */
+//== Permissions
+//
 
 table.permissions {
-    td.role {
-        color: $gray;
-        font-weight: normal;
-        text-align: center;
-        vertical-align: bottom;
-    }
+  td.role {
+    color: $gray-700;
+    font-weight: $font-weight-normal;
+    text-align: center;
+    vertical-align: bottom;
+  }
 }
 
 
-/**
- * Workflows
- */
+//== Workflows
+//
+
+.controller-workflows {
+  table.list,
+  fieldset.collapsible {
+    margin-bottom: $line-height-computed;
+  }
+}
 
 table.transitions {
-    td.enabled {
-        background: $state-success;
-    }
+  td.enabled {
+    background: $state-success;
+  }
 }
 
 #workflow_copy_form select {
-    width: 200px;
+  width: 200px;
 }
 
 #workflow_form table select {
-    width: 90%;
-    min-width: 60px;
+  width: 90%;
+  min-width: 60px;
 }
 
 table.fields_permissions {
-    td.readonly {
-        background: $gray-light;
-    }
+  td.readonly {
+    background: $gray-600;
+  }
 
-    td.required {
-        background: $state-danger;
-    }
+  td.required {
+    background: $state-danger;
+  }
 }
 
 
-/**
- * Enumerations
- */
+//== Custom fields -> Issues -> Key values
+//
 
-.controller-enumerations.action-index {
-    #content {
-        > h3,
-        > .list {
-            margin-bottom: $line-height-computed / 2;
-        }
+#custom_field_enumerations {
+  padding-left: 0;
+  list-style: none;
 
-        > p {
-            margin-bottom: $line-height-computed * 2;
-        }
+  li {
+    min-height: $input-height-base;
+    padding: 1px 0;
+
+    .sort-handle,
+    label {
+      line-height: $input-height-base;
     }
+
+    label input {
+      vertical-align: baseline;
+    }
+  }
 }
 
 
-/**
- * Settings labels
- */
+//== Settings labels
+//
 
 fieldset.settings label {
-    display: block;
+  display: block;
 }
 
 
-/**
- * Settings -> Notifications
- */
+//== Settings -> Notifications
+//
 
 fieldset#notified_events {
-    .parent {
-        padding-left: 20px;
-    }
+  .parent {
+    padding-left: 20px;
+  }
 }
 
 
-/**
- * Settings -> Repositories
- */
+//== Settings -> Repositories
+//
 
 .settings.enabled_scm {
-    table {
-        width: 100%;
-    }
+  table {
+    width: 100%;
+  }
 
-    td.scm_name {
-        font-weight: bold;
-    }
+  td.scm_name {
+    font-weight: $font-weight-bold;
+  }
 }

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

@@ -3,144 +3,186 @@
 // --------------------------------------------------
 
 html {
-    overflow-y: scroll;
+  overflow-y: scroll;
+  tab-size: 4;
 }
 
 body {
-    margin: 0;
-    padding: 0;
-    background-color: $body-bg;
-    color: $text-color;
-    font-family: $font-family-base;
-    font-size: $font-size-base;
-    line-height: $line-height-base;
+  margin: 0;
+  padding: 0;
+  background-color: $body-bg;
+  color: $text-color;
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  font-weight: $font-weight-normal;
+  line-height: $line-height-base;
 }
 
 a {
-    color: $link-color;
-    text-decoration: none;
+  color: $link-color;
+  text-decoration: none;
 
-    &:hover,
-    &:focus {
-        color: $link-hover-color;
-        text-decoration: $link-hover-decoration;
-    }
+  &:hover,
+  &:focus {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+  }
 
-    &.issue.closed {
-        color: $link-color-issue-closed;
-        text-decoration: $link-closed-decoration;
-    }
+  &.issue.closed {
+    color: $link-color-issue-closed;
+    text-decoration: $link-closed-decoration;
+  }
 
-    &.project.closed {
-        color: $link-color-project-closed;
-    }
+  &.project.closed {
+    color: $link-color-project-closed;
+  }
 
-    &.user.locked {
-        color: $link-color-user-locked;
-    }
+  &.user.locked {
+    color: $link-color-user-locked;
+  }
+}
+
+// Remove the tapping delay on clickable elements
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea,
+[tabindex] {
+  touch-action: manipulation;
 }
 
 h1 {
-    margin: 0;
-    font-size: 2em;             // ~28px
-    line-height: 30px;
+  margin: 0;
+  font-size: 2em;
+  font-weight: $font-weight-semi-bold;
+  line-height: $line-height-large * .825;
 }
 
 h2 {
-    margin-top: 0;
-    margin-bottom: $line-height-computed;
-    font-size: 1.43em;          // ~20px
-    font-weight: 500;
-    line-height: $line-height-computed;
+  margin-top: 0;
+  margin-bottom: $line-height-computed;
+  font-size: 1.43em;
+  font-weight: $font-weight-semi-bold;
+  line-height: $line-height-large;
 
-    img {
-        vertical-align: middle;
-    }
+  img {
+    vertical-align: middle;
+  }
 }
 
 h3 {
-    margin-top: 0;
-    margin-bottom: $line-height-computed;
-    font-size: 1.14em;          // ~16px
-    font-weight: 500;
-    line-height: $line-height-computed;
+  margin-top: 0;
+  margin-bottom: $line-height-computed;
+  font-size: 1.14em;
+  font-weight: $font-weight-semi-bold;
+  line-height: $line-height-large;
 }
 
 h4 {
-    margin-top: 0;
-    font-size: 1em;
-    font-weight: 500;
+  margin-top: 0;
+  font-size: 1em;
+  font-weight: $font-weight-semi-bold;
+  line-height: $line-height-base;
 }
 
 p {
-    margin: 0 0 ($line-height-computed / 2);
+  margin: 0 0 ($line-height-computed * .5);
 }
 
 small {
-    font-size: $font-size-small;
+  font-size: $font-size-small;
+}
+
+table {
+  th {
+    font-weight: $font-weight-bold;
+  }
+
+  th,
+  td {
+    padding: $table-condensed-cell-padding $table-cell-padding;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  form {
+    p {
+      margin-bottom: ($line-height-computed * .5);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
 }
 
 ul,
 ol {
-    margin-top: 0;
-    margin-bottom: ($line-height-computed / 2);
+  margin-top: 0;
+  margin-bottom: ($line-height-computed * .5);
+  padding-left: 1.5em;
 
-    ul,
-    ol {
-        margin-bottom: 0;
-    }
+  ul,
+  ol {
+    margin-bottom: 0;
+  }
 }
 
 dl {
-    margin-top: 0;
-    margin-bottom: $line-height-computed;
+  margin-top: 0;
+  margin-bottom: $line-height-computed;
 }
 
 dt {
-    margin-top: $line-height-computed;
-    font-weight: bold;
+  margin-top: $line-height-computed;
+  font-weight: $font-weight-bold;
 }
 
 dd {
-    margin-bottom: $line-height-computed;
-    margin-left: $line-height-computed;
+  margin-bottom: $line-height-computed;
+  margin-left: $line-height-computed;
 }
 
 code,
 kbd,
 pre,
 samp {
-    font-family: $font-family-monospace;
-    font-size: 1em;
+  font-family: $font-family-monospace;
+  font-size: 1em;
 }
 
 hr {
-    margin-top:    $line-height-computed;
-    margin-bottom: $line-height-computed;
-    border: 0;
-    border-top: 1px solid $hr-border;
-}
+  margin-top: $line-height-computed;
+  margin-bottom: $line-height-computed;
+  border: 0;
+  border-top: 1px solid $hr-border;
 
-abbr[title] {
-    border-bottom: 1px dotted $abbr-border-color;
-    cursor: help;
+  li & {
+    margin-top: $line-height-computed * .5;
+    margin-bottom: $line-height-computed * .5;
+  }
 }
 
 blockquote {
-    margin: 0 0 $line-height-computed;
-    padding: floor($line-height-computed / 4) $padding-large-horizontal;
-    border-left: 4px solid $blockquote-border-color-fallback;
-    border-left-color: $blockquote-border-color;
+  margin: 0 0 $line-height-computed;
+  padding: floor($line-height-computed * .25) $padding-large-horizontal;
+  border-left: 4px solid $blockquote-border-color;
 
-    >:first-child {
-        margin-top: 0;
-    }
+  > :first-child {
+    margin-top: 0;
+  }
 
-    >:last-child {
-        margin-bottom: 0;
-    }
+  > :last-child {
+    margin-bottom: 0;
+  }
 }
 
 .clear {
-    @extend %clearfix;
+  @extend %clearfix;
 }

src/sass/components/_buttons.scss

@@ -4,186 +4,293 @@
 
 input[type="button"],
 input[type="submit"],
+input[type="reset"],
 button {
-    display: inline-block;
-    margin-bottom: 0;
-    border: 1px solid;
-    cursor: pointer;
-    font-weight: $btn-font-weight;
-    text-align: center;
-    white-space: nowrap;
-    @include button-size($input-padding-vertical, $input-padding-horizontal, $font-size-base, $line-height-base, $border-radius-base);
-    @include user-select(none);
-    @include transition(background-color ease-in-out .07s, border-color ease-in-out .07s, box-shadow ease-in-out .07s);
-    @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+  @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,
+    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;
+  vertical-align: top;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
 
-    &:hover,
-    &:focus {
-        text-decoration: none;
-    }
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
 
-    &:active {
-        outline: 0;
-    }
-
-    &.disabled,
-    &[disabled],
-    fieldset[disabled] & {
-        pointer-events: none; // Future-proof disabling of clicks
-        box-shadow: none;
-        @include opacity(.65);
-    }
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    opacity: .65;
+    box-shadow: none;
+    pointer-events: none; // Future-proof disabling of clicks
+  }
 }
 
 
-/**
- * Issue form buttons layout
- */
+//== Form buttons layout
+//
 
-#issue-form,
-#history .journal form {
-    input[type="submit"] {
-        margin-right: 5px;
+form {
+  input[type="submit"] {
+    margin-right: 2px;
 
-        + input {
-            @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
-        }
-
-        + a {
-            margin-right: 5px;
-        }
-
-        + a + a {
-            margin-left: 5px;
-        }
+    + input {
+      @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
     }
+
+    ~ a {
+      margin-right: 2px;
+
+      + a {
+        margin-left: 2px;
+      }
+    }
+  }
 }
 
 
-/**
- * Project's repository form buttons layout
- */
+//== Repository's 'View differences' button
+//
 
-#repository-form {
-    input[type="submit"] {
-        margin-right: 5px;
-    }
-}
-
-
-/**
- * Repository's 'View differences' button
- */
 form[action*="repository/diff"] {
-    margin-bottom: $line-height-computed / 2;
+  margin-bottom: $line-height-computed * .5;
 }
 
 
-/**
- * New _something_ form buttons layout
- */
-
-#add_attachment_form,
-#new_time_entry,
-#new_project,
-#new_document,
-#new_group,
-#new_user {
-    input[type="submit"] {
-        margin-right: 5px;
-
-        + input {
-            @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
-        }
-    }
-}
-
-
-/**
- * Wiki form buttons layout
- */
-
-#wiki_form {
-    input[type="submit"] {
-        margin-right: 5px;
-    }
-}
-
-
-/**
- * Forum and news message form buttons layout
- */
+//== Forum and news message form buttons layout
+//
 
 #message-form,
 #news-form {
-    input[type="submit"] {
-        margin-right: 5px;
-
-        + a {
-            margin-right: 5px;
-        }
-
-        + a + a {
-            margin-left: 5px;
-        }
-    }
-
-    #message_sticky,
-    #message_locked {
-        position: relative;
-        top: 1px;
-        margin-left: 5px;
-    }
+  #message_sticky,
+  #message_locked {
+    position: relative;
+    top: 1px;
+    margin-left: 5px;
+  }
 }
 
 
-/**
- * Query builder buttons
- */
+//== Button links
+//
+p.buttons,
+.other-formats > span,
+#wiki_add_attachment > p,
+#content > .contextual,
+#content > .contextual > span:not(.drdn),
+#query_form > .contextual,
+#query_form_with_buttons > .contextual {
+  > a,
+  > span:not(.drdn) {
+    display: inline-block;
+    margin-right: 1px;
+    margin-left: 1px;
+    padding: $btn-padding-vertical $btn-padding-horizontal-small;
+    transition:
+      border-color $transition-time ease-in-out,
+      background-color $transition-time ease-in-out,
+      color $transition-time ease-in-out;
+    border: 1px solid;
+    border-radius: $border-radius-base;
+    font-size: $font-size-base;
+
+    &.icon {
+      padding-left: 20px + $btn-padding-horizontal-small;
+      background-position: $btn-padding-horizontal-small 50%;
+    }
+  }
+
+  > a {
+    border-color: $pagination-border;
+    background-color: $pagination-bg;
+    color: $pagination-color;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &:hover,
+    &:focus {
+      border-color: $pagination-hover-border;
+      background-color: $pagination-hover-bg;
+      color: $pagination-hover-color;
+      text-decoration: none;
+    }
+  }
+
+  > span:not(.drdn) {
+    border-color: $pagination-inactive-border;
+    background-color: $pagination-inactive-bg;
+    color: $pagination-inactive-color;
+  }
+}
+
+
+//== 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 * .5);
+  }
+}
+
+
+//== Apply + clear
+//
+
+form {
+  input,
+  button,
+  select {
+    ~ a {
+      margin-left: ceil($btn-padding-horizontal-small * .5);
+      line-height: $input-height-base;
+    }
+  }
+}
+
+
+//== Action buttons group
+//
+
+p.buttons {
+  margin-bottom: $line-height-computed;
+}
+
+
+//== Export actions
+//
+
+.other-formats {
+  margin: $line-height-computed 0 0;
+  text-align: right;
+
+  > span {
+    margin-right: 1px;
+    margin-left: 1px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  @media screen and (min-width: $redmine-responsive-min) {
+    .pagination + &,
+    #wiki_add_attachment + & {
+      margin-top: 0;
+      float: right;
+    }
+  }
+}
+
+
+//== Query builder buttons
+//
 
 .query-columns {
-    select {
-        width: auto !important;
+  select {
+    width: auto !important; // stylelint-disable-line declaration-no-important
+    min-width: 130px;
+  }
+
+  label + & {
+    margin-left: $padding-side;
+  }
+
+  @at-root span#{&} {
+    > span {
+      display: inline-block;
+      height: 100%;
+      vertical-align: middle;
     }
 
-    .buttons {
-        vertical-align: middle;
-
-        input[type="button"] {
-            width: 32px;
-            margin-bottom: 4px;
-            @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
-        }
+    label {
+      display: block;
+      margin-bottom: $line-height-computed * .5;
+      line-height: initial;
     }
+  }
+
+  .buttons {
+    vertical-align: middle;
+
+    br {
+      display: none;
+    }
+
+    input[type="button"] {
+      display: block;
+      width: 32px;
+      margin-bottom: 4px;
+      padding-right: 1px;
+      padding-left: 1px;
+      @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
+    }
+  }
 }
 
 
-/**
- * Button for toggling multiselect (in filters)
- */
+//== Button for toggling multiselect (in filters)
+//
 
 a[data-expands],
 .toggle-multiselect {
-    position: relative;
-    top: 3px;
-    padding: 2px 8px;
-    border: 1px solid;
-    border-radius: $border-radius-base;
-    background-image: url("../images/bullet_toggle_plus.png");
-    background-repeat: no-repeat;
-    background-position: 2px 2px;
-    cursor: pointer;
-    vertical-align: top;
-    @include user-select(none);
-    @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
+  display: inline-block;
+  position: relative;
+  top: 3px;
+  padding: 10px;
+  border: 1px solid;
+  border-radius: $border-radius-base;
+  background-image: inline-svg("plus.svg", (path: (fill: $btn-default-icon-color)));
+  background-repeat: no-repeat;
+  background-position: 2px 2px;
+  font-size: 0;
+  vertical-align: top;
+  cursor: pointer;
+  user-select: none;
+  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
+
+  &.icon-only::before {
+    content: none;
+  }
 }
 
 a[data-expands] {
-    display: inline-block;
-    margin-right: 10px;
-    padding: 10px;
+  margin-right: 10px;
 
-    img {
-        display: none;
-    }
+  > .toggle-multiselect {
+    padding: 0;
+    border: 0 none;
+    background: transparent;
+  }
+
+  img {
+    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

@@ -4,81 +4,93 @@
 
 
 table.cal {
-    width: 100%;
-    margin-bottom: $line-height-computed;
+  width: 100%;
+  margin-bottom: $line-height-computed;
+  border: 1px solid $table-border-color;
+
+  thead th {
+    width: 14%;
+    padding: $table-condensed-cell-padding;
+    background-color: $table-bg-active;
+
+    &.week-number {
+      width: auto;
+    }
+  }
+
+  tbody tr {
+    height: 100px;
+  }
+
+  td {
+    padding: $table-condensed-cell-padding;
     border: 1px solid $table-border-color;
+    font-size: $font-size-small;
+    vertical-align: top;
 
-    thead th {
-        width: 14%;
-        padding: $table-condensed-cell-padding;
-        background-color: $table-bg-hover;
-
-        &.week-number {
-            width: auto;
-        }
+    &.week-number {
+      border: 0 none;
+      background-color: $table-bg-active;
+      font-size: 1em;
+      text-align: right;
     }
 
-    tbody tr {
-        height: 100px;
+    p.day-num {
+      float: right;
+      font-size: $font-size-large;
+      text-align: right;
     }
 
-    td {
-        padding: $table-condensed-cell-padding;
-        border: 1px solid $table-border-color;
-        font-size: $font-size-small;
-        vertical-align: top;
-
-        &.week-number {
-            border: 0 none;
-            background-color: $table-bg-hover;
-            font-size: 1em;
-            text-align: right;
-        }
-
-        p.day-num {
-            float: right;
-            font-size: $font-size-large;
-            text-align: right;
-        }
-
-        &.odd p.day-num {
-            color: $gray-light;
-        }
-
-        &.today {
-            background: $highlight-bg;
-
-            p.day-num {
-                font-weight: bold;
-            }
-        }
+    &.odd p.day-num {
+      color: $gray-600;
     }
+
+    &.nwday {
+      background: $table-bg-accent;
+    }
+
+    &.today {
+      background: $highlight-bg;
+
+      p.day-num {
+        font-weight: $font-weight-bold;
+      }
+    }
+  }
 }
 
 table.cal .starting a,
 p.cal.legend .starting,
 table.cal .ending a,
 p.cal.legend .ending {
-    padding-left: 20px;
-    background-image: url("../../../images/bullet_go.png");
-    background-repeat: no-repeat;
-    background-position: 0 center;
+  @extend %fa-icon;
+
+  &::before {
+    content: $fa-var-caret-right;
+    width: 10px;
+    text-align: right;
+  }
 }
 
 table.cal .ending a,
 p.cal.legend .ending {
-    padding-left: 20px;
-    background-image: url("../../../images/bullet_end.png");
+  &::before {
+    content: $fa-var-caret-left;
+    text-align: left;
+  }
 }
 
 table.cal .starting.ending a,
 p.cal.legend .starting.ending {
-    padding-left: 20px;
-    background-image: url("../../../images/bullet_diamond.png");
+  &::before {
+    content: $fa-var-square;
+    transform: scale(.6) rotate(45deg);
+    text-align: center;
+  }
 }
 
 p.cal.legend {
-    span {
-        display: block;
-    }
+  span {
+    display: block;
+  }
 }

src/sass/components/_coderay.scss

@@ -3,361 +3,360 @@
 // --------------------------------------------------
 
 .syntaxhl {
-    div {
-        display: inline;
-    }
+  div {
+    display: inline;
+  }
 
-    .line-numbers {
-        margin: 0 5px 0 0;
-        padding: 2px 4px;
-        background-color: #eee;
-    }
+  .line-numbers {
+    margin: 0 5px 0 0;
+    padding: 2px 4px;
+    background-color: #eee;
+  }
 
-    .code pre {
-        overflow: auto;
-    }
+  .code pre {
+    overflow: auto;
+  }
 
-    .debug {
-        background: #00f !important;
-        color: #fff !important;
-    }
+  .debug {
+    // stylelint-disable declaration-no-important
+    background: #00f !important;
+    color: #fff !important;
+  }
 
-    .annotation {
-        color: #007;
-    }
+  .annotation {
+    color: #007;
+  }
 
-    .attribute-name {
-        color: #b48;
-    }
+  .attribute-name {
+    color: #b48;
+  }
 
-    .attribute-value {
-        color: #700;
-    }
+  .attribute-value {
+    color: #700;
+  }
 
-    .binary {
-        color: #509;
-    }
+  .binary {
+    color: #509;
+  }
 
-    .char {
-        color: #d20;
+  .char {
+    color: #d20;
 
-        .content {
-            color: #d20;
-        }
-
-        .delimiter {
-            color: #710;
-        }
-    }
-
-    .class {
-        color: #795da3;
-        font-weight: bold;
-    }
-
-    .class-variable {
-        color: #369;
-    }
-
-    .color {
-        color: #0a0;
-    }
-
-    .comment {
-        color: #969896;
-
-        .char,
-        .delimiter {
-            color: #969896;
-        }
-    }
-
-    .complex {
-        color: #a08;
-    }
-
-    .constant {
-        color: #795da3;
-    }
-
-    .decorator {
-        color: #b0b;
-    }
-
-    .definition {
-        color: #099;
-        font-weight: bold;
+    .content {
+      color: #d20;
     }
 
     .delimiter {
-        color: #000;
+      color: #710;
+    }
+  }
+
+  .class {
+    color: #795da3;
+    font-weight: $font-weight-bold;
+  }
+
+  .class-variable {
+    color: #369;
+  }
+
+  .color {
+    color: #0a0;
+  }
+
+  .comment {
+    color: #969896;
+
+    .char,
+    .delimiter {
+      color: #969896;
+    }
+  }
+
+  .complex {
+    color: #a08;
+  }
+
+  .constant {
+    color: #795da3;
+  }
+
+  .decorator {
+    color: #b0b;
+  }
+
+  .definition {
+    color: #099;
+    font-weight: $font-weight-bold;
+  }
+
+  .delimiter {
+    color: #000;
+  }
+
+  .directive {
+    color: #088;
+    font-weight: $font-weight-bold;
+  }
+
+  .doc {
+    color: #970;
+  }
+
+  .doc-string {
+    color: #d42;
+    font-weight: $font-weight-bold;
+  }
+
+  .doctype {
+    color: #34b;
+  }
+
+  .entity {
+    color: #800;
+    font-weight: $font-weight-bold;
+  }
+
+  .error {
+    background-color: #faa;
+    color: #f00;
+  }
+
+  .escape {
+    color: #666;
+  }
+
+  .exception {
+    color: #c00;
+    font-weight: $font-weight-bold;
+  }
+
+  .float {
+    color: #06d;
+  }
+
+  .function {
+    color: #06b;
+    font-weight: $font-weight-bold;
+  }
+
+  .global-variable {
+    color: #d70;
+  }
+
+  .hex {
+    color: #02b;
+  }
+
+  .imaginary {
+    color: #f00;
+  }
+
+  .include {
+    color: #b44;
+    font-weight: $font-weight-bold;
+  }
+
+  .inline {
+    background-color: rgba(#000, .05);
+    color: #000;
+  }
+
+  .inline-delimiter {
+    color: #666;
+    font-weight: $font-weight-bold;
+  }
+
+  .instance-variable {
+    color: #33b;
+  }
+
+  .integer {
+    color: #0086b3;
+  }
+
+  .key {
+    color: #606;
+
+    .char {
+      color: #60f;
     }
 
-    .directive {
-        color: #088;
-        font-weight: bold;
+    .delimiter {
+      color: #404;
+    }
+  }
+
+  .keyword {
+    color: #b3113e;
+    font-weight: $font-weight-bold;
+  }
+
+  .label {
+    color: #970;
+    font-weight: $font-weight-bold;
+  }
+
+  .local-variable {
+    color: #369;
+  }
+
+  .namespace {
+    color: #707;
+    font-weight: $font-weight-bold;
+  }
+
+  .octal {
+    color: #40e;
+  }
+
+  .predefined {
+    color: #b21;
+  }
+
+  .predefined-constant {
+    color: #009595;
+  }
+
+  .predefined-type {
+    color: #0a5;
+    font-weight: $font-weight-bold;
+  }
+
+  .preprocessor {
+    color: #579;
+  }
+
+  .pseudo-class {
+    color: #00c;
+    font-weight: $font-weight-bold;
+  }
+
+  .regexp {
+    background-color: hsla(300, 100%, 50%, .06);
+
+    .content {
+      color: #808;
     }
 
-    .doc {
-        color: #970;
+    .delimiter {
+      color: #404;
     }
 
-    .doc-string {
-        color: #d42;
-        font-weight: bold;
+    .modifier {
+      color: #c2c;
+    }
+  }
+
+  .reserved {
+    color: #080;
+    font-weight: $font-weight-bold;
+  }
+
+  .shell {
+    background-color: hsla(120, 100%, 50%, .06);
+
+    .content {
+      color: #2b2;
     }
 
-    .doctype {
-        color: #34b;
+    .delimiter {
+      color: #161;
     }
+  }
 
-    .entity {
-        color: #800;
-        font-weight: bold;
+  .string {
+    .char,
+    .content,
+    .delimiter,
+    .modifier {
+      color: #df5000;
     }
+  }
 
-    .error {
-        background-color: #faa;
-        color: #f00;
+  .symbol {
+    color: #d33;
+
+    .content,
+    .delimiter {
+      color: #d33;
     }
+  }
 
-    .escape {
-        color: #666;
-    }
+  .tag {
+    color: #070;
+  }
 
-    .exception {
-        color: #c00;
-        font-weight: bold;
-    }
+  .type {
+    color: #339;
+    font-weight: $font-weight-bold;
+  }
 
-    .float {
-        color: #06d;
-    }
+  .value {
+    color: #088;
+  }
 
-    .function {
-        color: #06b;
-        font-weight: bold;
-    }
+  .variable {
+    color: #037;
+  }
 
-    .global-variable {
-        color: #d70;
-    }
-
-    .hex {
-        color: #02b;
-    }
-
-    .imaginary {
-        color: #f00;
-    }
-
-    .include {
-        color: #b44;
-        font-weight: bold;
-    }
-
-    .inline {
-        background-color: rgba(#000, .05);
-        color: #000;
-    }
-
-    .inline-delimiter {
-        color: #666;
-        font-weight: bold;
-    }
-
-    .instance-variable {
-        color: #33b;
-    }
-
-    .integer {
-        color: #0086b3;
-    }
-
-    .key {
-        color: #606;
-
-        .char {
-            color: #60f;
-        }
-
-        .delimiter {
-            color: #404;
-        }
-    }
-
-    .keyword {
-        color: #b3113e;
-        font-weight: bold;
-    }
-
-    .label {
-        color: #970;
-        font-weight: bold;
-    }
-
-    .local-variable {
-        color: #369;
-    }
-
-    .namespace {
-        color: #707;
-        font-weight: bold;
-    }
-
-    .octal {
-        color: #40e;
-    }
-
-    .predefined {
-        color: #b21;
-    }
-
-    .predefined-constant {
-        color: #009595;
-    }
-
-    .predefined-type {
-        color: #0a5;
-        font-weight: bold;
-    }
-
-    .preprocessor {
-        color: #579;
-    }
-
-    .pseudo-class {
-        color: #00c;
-        font-weight: bold;
-    }
-
-    .regexp {
-        background-color: hsla(300, 100%, 50%, .06);
-
-        .content {
-            color: #808;
-        }
-
-        .delimiter {
-            color: #404;
-        }
-
-        .modifier {
-            color: #c2c;
-        }
-    }
-
-    .reserved {
-        color: #080;
-        font-weight: bold;
-    }
-
-    .shell {
-        background-color: hsla(120, 100%, 50%, .06);
-
-        .content {
-            color: #2b2;
-        }
-
-        .delimiter {
-            color: #161;
-        }
-    }
-
-    .string {
-        .char,
-        .content,
-        .delimiter,
-        .modifier {
-            color: #df5000;
-        }
-    }
-
-    .symbol {
-        color: #d33;
-
-        .content,
-        .delimiter {
-            color: #d33;
-        }
-    }
-
-    .tag {
-        color: #070;
-    }
-
-    .type {
-        color: #339;
-        font-weight: bold;
-    }
-
-    .value {
-        color: #088;
-    }
-
-    .variable {
-        color: #037;
-    }
+  .insert {
+    background: hsla(120, 100%, 50%, .12);
 
     .insert {
-        background: hsla(120, 100%, 50%, .12);
+      background: transparent;
+      color: #0c0;
+      font-weight: $font-weight-bold;
     }
 
+    .eyecatcher {
+      margin: -1px;
+      border: 1px solid hsla(120, 100%, 25%, .5);
+      border-top: 0 none;
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+      background-color: hsla(120, 100%, 50%, .2);
+    }
+  }
+
+  .delete {
+    background: hsla(0, 100%, 50%, .12);
+
     .delete {
-        background: hsla(0, 100%, 50%, .12);
+      background: transparent;
+      color: #c00;
+      font-weight: $font-weight-bold;
     }
 
+    .eyecatcher {
+      margin: -1px;
+      border: 1px solid hsla(0, 100%, 45%, .5);
+      border-bottom: 0 none;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      background-color: hsla(0, 100%, 50%, .2);
+    }
+  }
+
+  .change {
+    background: #007;
+    color: #bbf;
+
     .change {
-        background: #007;
-        color: #bbf;
+      color: #88f;
     }
+  }
+
+  .head {
+    background: #505;
+    color: #f8f;
 
     .head {
-        background: #505;
-        color: #f8f;
-
-        .filename {
-            color: #fff;
-        }
+      color: #f4f;
     }
 
-    .delete .eyecatcher {
-        margin: -1px;
-        border: 1px solid hsla(0, 100%, 45%, .5);
-        border-bottom: 0 none;
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-        background-color: hsla(0, 100%, 50%, .2);
-    }
-
-    .insert {
-        .eyecatcher {
-            margin: -1px;
-            border: 1px solid hsla(120, 100%, 25%, .5);
-            border-top: 0 none;
-            border-bottom-left-radius: 5px;
-            border-bottom-right-radius: 5px;
-            background-color: hsla(120, 100%, 50%, .2);
-        }
-
-        .insert {
-            background: transparent;
-            color: #0c0;
-            font-weight: bold;
-        }
-    }
-
-    .delete .delete {
-        background: transparent;
-        color: #c00;
-        font-weight: bold;
-    }
-
-    .change .change {
-        color: #88f;
-    }
-
-    .head .head {
-        color: #f4f;
+    .filename {
+      color: #fff;
     }
+  }
 }

src/sass/components/_content.scss

@@ -1,5 +1,24 @@
 #main {
+  @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;
+  }
 }
 
 
@@ -8,8 +27,18 @@
 // --------------------------------------------------
 
 #content {
-    padding: $padding-side;
+  padding: $padding-side;
+  overflow-x: auto; // needed for drag & drop of enumerations
+
+  @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});
+  } @else {
     overflow: hidden;
+  }
 }
 
 
@@ -18,137 +47,325 @@
 // --------------------------------------------------
 
 #sidebar {
-    width: $sidebar-width - ($sidebar-padding-horizontal * 2) - 1px;
+  #main & {
     padding: $padding-side $sidebar-padding-horizontal;
+  }
+
+  #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" {
+      order: -1;
+    } @else {
+      order: 1;
+    }
+  } @else {
+    width: $sidebar-width-computed;
     float: $sidebar-position;
+  }
 
-    @media screen and (min-width: 1px) {
-        // scss-lint:disable VendorPrefixes
-        $border: $sidebar-link-active-border;
-        $body:   $body-bg;
-
-        padding-bottom: $padding-side * 3;
-        background-image: -webkit-linear-gradient($body 1%, $border 10%, $border 85%, $body);
-        background-image:      -o-linear-gradient($body 1%, $border 10%, $border 85%, $body);
-        background-image:         linear-gradient($body 1%, $border 10%, $border 85%, $body);
-        background-repeat: no-repeat;
-        background-size: 1px 100%;
-
-        @if $sidebar-position == "left" {
-            padding-right: $sidebar-padding-horizontal + 1px;
-            background-position: right 0;
-            box-shadow: inset -9px 0 6px -6px rgba(0, 0, 0, .05);
-        } @else {
-            padding-left: $sidebar-padding-horizontal + 1px;
-            background-position: left 0;
-            box-shadow: inset 9px 0 6px -6px rgba(0, 0, 0, .05);
-        }
+  @media screen and (min-width: 1px) {
+    @if not $flexbox-layout {
+      padding-bottom: $padding-side * 3;
     }
 
-    .nosidebar & {
-        width: 0;
-        margin: 0;
-        padding: 0;
-        float: none;
+    @if $sidebar-position == "left" {
+      border-right: 1px solid $sidebar-link-active-border;
+      box-shadow: inset -9px 0 6px -6px rgba(0, 0, 0, .05);
+    } @else {
+      border-left: 1px solid $sidebar-link-active-border;
+      box-shadow: inset 9px 0 6px -6px rgba(0, 0, 0, .05);
+    }
+  }
+
+  h3 {
+    margin-top: $line-height-computed * 1.5;
+  }
+
+  > h3:first-child,
+  > form:first-child > h3 {
+    margin-top: $line-height-computed * .25;
+  }
+
+  ul {
+    &:nth-child(n) {
+      margin: 0 0 ($line-height-computed * .5);
+      padding: 0;
+
+      @if $sidebar-position == "left" {
+        margin-right: -($sidebar-padding-horizontal);
+      }
     }
 
-    h3 {
-        margin-top: $line-height-computed * 1.5;
-    }
-
-    > h3:first-child,
-    > form:first-child > h3 {
-        margin-top: 0;
-    }
-
-    ul {
-        margin: 0 0 ($line-height-computed / 2);
-        padding: 0;
-
-        @if $sidebar-position == "left" {
-            margin-right: -($sidebar-padding-horizontal);
-        } @else {
-            margin-left: -($sidebar-padding-horizontal);
-        }
-    }
-
-    li {
+    &:not(.watchers) {
+      li {
         margin: 0;
         padding: 0;
         list-style-type: none;
 
-        > a {
-            display: block;
-            padding: $sidebar-padding-vertical $sidebar-padding-horizontal;
-            border: 1px solid transparent;
+        > a:not(.icon-only) {
+          display: block;
+          padding: $sidebar-padding-vertical $sidebar-padding-horizontal;
+          border: 1px solid transparent;
+
+          @if $sidebar-position == "left" {
+            border-left-width: 3px;
+            border-radius: $border-radius-large 0 0 $border-radius-large;
+          } @else {
+            margin-left: -($sidebar-padding-horizontal);
+            border-right-width: 3px;
+            border-radius: 0 $border-radius-large $border-radius-large 0;
+          }
+
+          &:hover {
+            background-color: $sidebar-link-hover-bg;
+            color: $sidebar-link-hover-text;
+            text-decoration: none;
+          }
+
+          &.selected {
+            border-color: $sidebar-link-active-border;
+            background-color: $sidebar-link-active-bg;
+            color: $sidebar-link-active-text;
 
             @if $sidebar-position == "left" {
-                border-left-width: 3px;
-                border-radius: $border-radius-large 0 0 $border-radius-large;
+              margin-right: -1px;
+              border-right-color: $body-bg;
+              border-left-color: $sidebar-link-active-side;
+              box-shadow: -3px 1px 2px rgba(0, 0, 0, .1);
             } @else {
-                border-right-width: 3px;
-                border-radius: 0 $border-radius-large $border-radius-large 0;
-            }
-
-            &:hover {
-                background-color: $sidebar-link-hover-bg;
-                text-decoration: none;
-            }
-
-            &.selected {
-                border-color: $sidebar-link-active-border;
-                background-color: $sidebar-link-active-bg;
-                color: $sidebar-link-active-text;
-
-                @if $sidebar-position == "left" {
-                    margin-right: -1px;
-                    border-right-color: $body-bg;
-                    border-left-color: $sidebar-link-active-side;
-                    box-shadow: -3px 1px 2px rgba(0, 0, 0, .1);
-                } @else {
-                    margin-left: -1px;
-                    border-right-color: $sidebar-link-active-side;
-                    border-left-color: $body-bg;
-                    box-shadow: 3px 1px 2px rgba(0, 0, 0, .1);
-                }
+              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);
             }
+          }
         }
+      }
     }
+
+    &.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 * .5;
+          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 * .5;
+            padding-left: $sidebar-padding-horizontal * .5;
+
+            @if $sidebar-position == "right" {
+              margin-left: 0;
+            }
+          }
+
+          .pages-hierarchy {
+            margin-left: $sidebar-padding-horizontal * .5 + 3px;
+          }
+        }
+      }
+    }
+  }
+
+  // Special treatment for anchor tags directly under sidebar tag
+  > a {
+    margin: $sidebar-padding-vertical $sidebar-padding-horizontal;
+
+    @if $sidebar-position == "left" {
+      margin-left: $sidebar-padding-horizontal + 3px;
+    } @else {
+      margin-right: $sidebar-padding-horizontal + 3px;
+      margin-left: 0;
+    }
+  }
+
+  // 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 * .5 + 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 * .5;
+          padding-left: $sidebar-padding-horizontal * .5;
+
+          @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) * .5;
+          left: $sidebar-padding-horizontal * .5 + 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);
+      }
+    }
+  }
 }
 
 #footer {
-    margin: $line-height-computed $padding-side;
-    padding-top: $line-height-computed;
-    border-top: 1px solid $gray-lighter;
-    color: $gray-light;
-    font-size: $font-size-small;
+  margin: 0 $padding-side $line-height-computed;
+  padding-top: $line-height-computed;
+  border-top: 1px solid $gray-400;
+  color: $gray-600;
+  font-size: $font-size-small;
+
+  @if $css-grid-layout {
+    grid-area: footer;
+  }
 }
 
 @if $fixed-layout {
-    @media screen and (min-width: $screen-sm-min) {
-        #main-menu ul,
-        #main {
-            width: $width-sm;
-            margin-right: auto;
-            margin-left: auto;
-        }
+  @media screen and (min-width: $screen-sm-min) {
+    #main-menu ul,
+    #main {
+      width: $width-sm;
+      margin-right: auto;
+      margin-left: auto;
     }
+  }
 
-    @media screen and (min-width: $screen-md-min) {
-        #main-menu ul,
-        #main {
-            width: $width-md;
-        }
+  @media screen and (min-width: $screen-md-min) {
+    #main-menu ul,
+    #main {
+      width: $width-md;
     }
+  }
 
-    @media screen and (min-width: $screen-lg-min) {
-        #main-menu ul,
-        #main {
-            width: $width-lg;
-        }
+  @media screen and (min-width: $screen-lg-min) {
+    #main-menu ul,
+    #main {
+      width: $width-lg;
     }
+  }
 
-    #main-menu ul > li > a {
-        padding: $main-menu-padding-vertical 1px;
-    }
+  #main-menu ul > li > a {
+    padding: $main-menu-padding-vertical 1px;
+  }
 }

src/sass/components/_context-menu.scss

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

src/sass/components/_dropdown.scss

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

src/sass/components/_flash.scss

@@ -8,85 +8,83 @@
 .nodata,
 .warning,
 .conflict {
-    margin-bottom: $line-height-computed;
-    padding: $padding-large-vertical $padding-large-horizontal;
-    padding-left: $padding-large-horizontal + 8px + 16px;
-    border: 1px solid;
-    border-radius: $border-radius-large;
+  @extend %fa-icon;
+  margin-bottom: $line-height-computed;
+  padding: $padding-large-vertical $padding-large-horizontal;
+  padding-left: $padding-large-horizontal + 8px + 16px;
+  border: 1px solid;
+  border-radius: $border-radius-large;
+  background-repeat: no-repeat;
+  background-position: $padding-large-horizontal 50%;
 
-    @if $use-font-awesome {
-        @extend %fa-icon;
+  &::before {
+    margin-left: -(8px + 16px);
+    float: left;
+    line-height: $line-height-computed;
+  }
 
-        &:before {
-            margin-left: -(8px + 16px);
-            float: left;
-            line-height: $line-height-computed;
-        }
-    } @else {
-        background-repeat: no-repeat;
-        background-position: $padding-large-horizontal 50%;
-    }
-
-    p:last-child,
-    ol:last-child,
-    ul:last-child {
-        margin-bottom: 0;
-    }
+  > :last-child {
+    margin-bottom: 0;
+  }
 }
 
 @mixin flash($color, $background, $border, $link, $icon) {
-    color: $color;
-    background-color: $background;
-    border-color: $border;
+  border-color: $border;
+  background-color: $background;
+  color: $color;
 
-    @if $use-font-awesome {
-        @if     $icon == "true"        { $icon: $fa-var-check; }
-        @elseif $icon == "warning"     { $icon: $fa-var-warning; }
-        @elseif $icon == "exclamation" { $icon: $fa-var-exclamation-circle; }
+  @if $icon == "true" {
+    $icon: $fa-var-check;
+  } @else if $icon == "warning" {
+    $icon: $fa-var-warning;
+  } @else if $icon == "exclamation" {
+    $icon: $fa-var-exclamation-circle;
+  }
 
-        &:before {
-            content: $icon;
-        }
-    } @else {
-        background-image: url(../../../images/#{$icon}.png);
-    }
+  &::before {
+    content: $icon;
+  }
 
-    a {
-        color: $link;
-        font-weight: bold;
-    }
+  a {
+    color: $link;
+    font-weight: $font-weight-bold;
+  }
 }
 
 .warning,
 .conflict,
 .nodata {
-    @include flash($flash-warning-text, $flash-warning-bg, $flash-warning-border, $flash-warning-link, "warning");
+  @include flash($flash-warning-text, $flash-warning-bg, $flash-warning-border, $flash-warning-link, "warning");
 }
 
 .flash.notice {
-    @include flash($flash-success-text, $flash-success-bg, $flash-success-border, $flash-success-link, "true");
+  @include flash($flash-success-text, $flash-success-bg, $flash-success-border, $flash-success-link, "true");
 }
 
 #errorExplanation,
 .flash.error {
-    @include flash($flash-error-text, $flash-error-bg, $flash-error-border, $flash-error-link, "exclamation");
+  @include flash($flash-error-text, $flash-error-bg, $flash-error-border, $flash-error-link, "exclamation");
 }
 
 .nodata {
-    padding-left: $padding-large-horizontal;
-    text-align: center;
+  padding-left: $padding-large-horizontal;
+  text-align: center;
 
-    @if $use-font-awesome {
-        &:before {
-            margin-left: 0;
-            float: none;
-        }
+  &.nodata-left {
+    &::before {
+      float: left;
     }
+  }
+
+  &::before {
+    margin-left: 0;
+    float: none;
+  }
 }
 
 #errorExplanation {
-    h2,
-    p {
-        display: none;
-    }
+  h2,
+  p {
+    display: none;
+  }
 }

src/sass/components/_gantt.scss

@@ -2,76 +2,142 @@
 // Gantt chart
 // --------------------------------------------------
 
-.gantt_hdr {
-    position: absolute;
-    top: 0;
-    height: 16px;
-    border: 1px solid $gray-lighter;
-    border-left-width: 0;
-    text-align: center;
-    overflow: hidden;
+div.gantt_content {
+  overflow: auto;
+}
 
-    &.nwday {
-        background-color: $gray-lightest;
-    }
+.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-500;
+  text-align: center;
+
+  &[style*="background"] {
+    background: $gray-200 !important; // stylelint-disable-line declaration-no-important
+  }
+
+  &.nwday {
+    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;
-
-    div {
-        height: 16px;
-        line-height: 16px;
-        @include text-overflow;
+  .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;
+  }
 }
 
 .task {
-    position: absolute;
-    height: 8px;
-    margin: 2px 0 0;
-    padding: 0;
-    font-size: 11px;
-    line-height: 16px;
-    white-space: nowrap;
+  position: absolute;
+  height: 8px;
+  margin: 2px 0 0;
+  padding: 0;
+  font-size: 11px;
+  line-height: 16px;
+  white-space: nowrap;
 
-    &.label {
-        width: 100%;
-        margin-top: 0;
+  &.label {
+    width: 100%;
+    margin-top: 0;
 
-        &.project,
-        &.version {
-            font-weight: bold;
-        }
+    &.project,
+    &.version {
+      font-weight: $font-weight-bold;
     }
-}
+  }
 
-.task_late {
-    border: 1px solid darken($progress-bar-danger-bg, 10%);
-    background-color: $progress-bar-danger-bg;
-}
-
-.task_done {
-    border: 1px solid darken($progress-bar-success-bg, 10%);
-    background-color: $progress-bar-success-bg;
-}
-
-.task_todo {
-    border: 1px solid darken($progress-bg, 20%);
-    background-color: $progress-bg;
-
-    &.parent {
-        border: 1px solid darken($progress-bg, 30%);
-        background-color: darken($progress-bg, 10%);
-    }
-}
-
-.task.parent {
+  &.parent {
     height: 3px;
-}
 
-.task.parent.marker {
-    &.starting {
+    &.marker {
+      &.starting {
         position: absolute;
         top: -1px;
         left: 0;
@@ -79,9 +145,9 @@
         height: 16px;
         margin-left: -4px;
         background: url("../../../images/task_parent_end.png") no-repeat 0 0;
-    }
+      }
 
-    &.ending {
+      &.ending {
         position: absolute;
         top: -1px;
         right: 0;
@@ -89,98 +155,110 @@
         height: 16px;
         margin-left: -4px;
         background: url("../../../images/task_parent_end.png") no-repeat 0 0;
+      }
     }
+  }
+}
+
+.task_late {
+  border: 1px solid darken($progress-bar-danger-bg, 10%);
+  background-color: $progress-bar-danger-bg;
+}
+
+.task_done {
+  border: 1px solid darken($progress-bar-success-bg, 10%);
+  background-color: $progress-bar-success-bg;
+}
+
+.task_todo {
+  border: 1px solid darken($progress-bg, 20%);
+  background-color: $progress-bg;
+
+  &.parent {
+    border: 1px solid darken($progress-bg, 30%);
+    background-color: darken($progress-bg, 10%);
+  }
 }
 
 .project,
 .version {
-    &.task_late,
-    &.task_done,
-    &.task_todo {
-        height: 2px;
-        margin-top: 3px;
-    }
+  &.task_late,
+  &.task_done,
+  &.task_todo {
+    height: 2px;
+    margin-top: 3px;
+  }
 
-    &.task_todo {
-        border: 1px solid darken($progress-bar-info-bg, 10%);
-        background-color: $progress-bar-info-bg;
-    }
+  &.task_todo {
+    border: 1px solid darken($progress-bar-info-bg, 10%);
+    background-color: $progress-bar-info-bg;
+  }
 
-    &.marker {
-        margin-top: 1px;
-        margin-left: -4px;
-        border: 0 none;
-        background-image: url("../../../images/version_marker.png");
-        background-repeat: no-repeat;
-    }
+  &.marker {
+    margin-top: 1px;
+    margin-left: -4px;
+    border: 0 none;
+    background-image: url("../../../images/version_marker.png");
+    background-repeat: no-repeat;
+  }
 }
 
-.version-behind-schedule a,
-.issue-behind-schedule a {
-    color: $brand-warning;
+.version-behind-schedule,
+.issue-behind-schedule {
+  color: $brand-warning;
 
-    @if $color-trackers {
-        &.issue {
-            background-color: $brand-warning;
-            color: $brand-text;
-            font-weight: 700;
-        }
-    }
+  .context-menu-selection & {
+    color: $brand-text;
+  }
 }
 
-.version-overdue a,
-.issue-overdue a,
-.project-overdue a {
-    color: $brand-danger;
+.version-overdue,
+.issue-overdue,
+.project-overdue {
+  color: $brand-danger;
 
-    @if $color-trackers {
-        &.issue {
-            background-color: $brand-danger;
-            color: $brand-text;
-            font-weight: 700;
-        }
-    }
+  .context-menu-selection & {
+    color: $brand-text;
+  }
 }
 
-/**
- * Tooltips
- */
+
+//== Tooltips
+//
 
 .tooltip {
-    position: relative;
-    z-index: 24;
+  position: relative;
+  z-index: 24;
 
-    &:hover {
-        z-index: 25;
-    }
+  &:hover {
+    z-index: 25;
 
-    .tip {
-        display: none;
-        position: absolute;
-        top: 9px;
-        left: 24px;
-        width: 270px;
-        padding: $padding-base-vertical;
-        border: 1px solid $tooltip-border;
-        background-color: $tooltip-bg;
-        color: $tooltip-text;
-        font-size: $font-size-small;
-        text-align: left;
-        box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
+    span.tip {
+      display: block;
     }
+  }
 
-    @if $sidebar-position == "left" {
-        tr > td:last-child & {
-            .tip {
-                right: 2px;
-                left: auto;
-            }
-        }
-    }
+  span.tip {
+    @include nice-shadow(3);
+    display: none;
+    position: absolute;
+    top: 12px;
+    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;
+    text-align: left;
+  }
 
-    &:hover {
-        .tip {
-            display: block;
-        }
+  @if $sidebar-position == "left" {
+    .list & {
+      span.tip {
+        right: 0;
+        left: auto;
+      }
     }
+  }
 }

src/sass/components/_gravatar.scss

@@ -3,32 +3,32 @@
 // --------------------------------------------------
 
 img.gravatar {
-    border-radius: $border-radius-large;
-    line-height: 1;
-    overflow: hidden;
-    vertical-align: middle;
+  position: relative;
+  top: -.15em;
+  overflow: hidden;
+  border-radius: $border-radius-large;
+  line-height: 1;
+  vertical-align: middle;
 
-    h2 &,
-    h3 &,
-    h4 & {
-        position: relative;
-        top: -1px;
-        margin-right: 5px;
-    }
+  h2 &,
+  h3 &,
+  h4 & {
+    margin-right: 5px;
+  }
 }
 
 
-// For Administration -> /users
+//== Administration -> /users
+//
 
 .username img.gravatar {
-    position: relative;
-    top: 1px;
-    margin-right: .5em;
-    vertical-align: top;
+  margin-right: .5em;
 }
 
-/* Used on 12px Gravatar img tags without the icon background */
+//== Gravatar
+//   Used on 12px Gravatar img tags without the icon background
+
 .icon-gravatar {
-    margin-right: 5px;
-    float: left;
+  margin-right: 5px;
+  float: left;
 }

src/sass/components/_image-base64.scss

@@ -0,0 +1,8 @@
+//
+// Base64 encoded images
+// --------------------------------------------------
+
+// ACI = AutoComplete Indicator
+%image-aci {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAKBAMAAAAnY0GXAAAAD1BMVEUAAACzs7Ozs7Ozs7Ozs7NJvZFvAAAABHRSTlMA5kpJG2qUMwAAABtJREFUCNdjIBMYCkMRDIg4QhBuAUUhKCIPAAAlaQNk5qF21gAAAABJRU5ErkJggg==");
+}

src/sass/components/_jquery-ui.scss

@@ -3,86 +3,83 @@
 // --------------------------------------------------
 
 
-/**
- * Component containers
- */
+//== Component containers
+//
 
 .ui-widget {
-    &,
-    input,
-    select,
-    textarea,
-    button {
-        font-family: inherit;
-        font-size: inherit;
-    }
+  &,
+  input,
+  select,
+  textarea,
+  button {
+    font-family: inherit;
+    font-size: inherit;
+  }
 }
 
 
-/**
- * Widgets
- */
+//== Widgets
+//
 
 .ui-widget-content {
-    border: 1px solid $panel-border;
-    background: $body-bg;
-    color: $text-color;
+  border: 1px solid $panel-border;
+  background: $body-bg;
+  color: $text-color;
 
-    a {
-        color: $text-color;
-    }
+  a {
+    color: $text-color;
+  }
 }
 
 .ui-widget-header {
-    border: 0 none;
-    background: $header-bg;
+  border: 0 none;
+  background: $header-bg;
+  color: $header-text;
+  font-weight: $font-weight-bold;
+
+  a {
     color: $header-text;
-    font-weight: bold;
+  }
 
-    a {
-        color: $header-text;
+  a,
+  button {
+    &.ui-state-default {
+      border-color: $header-bg;
+      background: $header-bg;
+      color: $header-text;
     }
 
-    a,
-    button {
-        &.ui-state-default {
-            border-color: $header-bg;
-            background: $header-bg;
-            color: $header-text;
-        }
-
-        &.ui-state-hover,
-        &.ui-state-focus {
-            border-color: darken($header-bg, 12%);
-            background: darken($header-bg, 10%);
-        }
-
-        .ui-icon {
-            background-image: url("/stylesheets/jquery/images/ui-icons_ffffff_256x240.png");
-        }
+    &.ui-state-hover,
+    &.ui-state-focus {
+      border-color: darken($header-bg, 12%);
+      background: darken($header-bg, 10%);
     }
+
+    .ui-icon {
+      background-image: url("../../../stylesheets/jquery/images/ui-icons_ffffff_256x240.png");
+    }
+  }
 }
 
 
-/**
- * Interaction states
- */
+//== Interaction states
+//
 
 .ui-state-default,
 .ui-widget-content .ui-state-default,
 .ui-widget-header .ui-state-default {
-    border: 1px solid $component-border;
-    background: $component-bg;
-    color: $component-color;
-    font-weight: normal;
-    box-shadow: none;
+  border: 1px solid $component-border;
+  background: $component-bg;
+  box-shadow: none;
+  color: $component-color;
+  font-weight: $font-weight-normal;
 }
 
 .ui-state-default a,
 .ui-state-default a:link,
 .ui-state-default a:visited {
-    color: $component-color;
-    text-decoration: none;
+  color: $component-color;
+  text-decoration: none;
 }
 
 .ui-state-hover,
@@ -91,10 +88,10 @@
 .ui-state-focus,
 .ui-widget-content .ui-state-focus,
 .ui-widget-header .ui-state-focus {
-    border: 1px solid $component-active-border;
-    background: $component-active-bg;
-    color: $component-active-color;
-    font-weight: normal;
+  border: 1px solid $component-active-border;
+  background: $component-active-bg;
+  color: $component-active-color;
+  font-weight: $font-weight-normal;
 }
 
 .ui-state-hover a,
@@ -105,176 +102,231 @@
 .ui-state-focus a:hover,
 .ui-state-focus a:link,
 .ui-state-focus a:visited {
-    color: $component-active-color;
-    text-decoration: none;
+  color: $component-active-color;
+  text-decoration: none;
 }
 
 .ui-state-active,
 .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active {
-    border: 1px solid $component-active-border;
-    background: $component-active-bg;
-    color: $component-active-color;
-    font-weight: normal;
+  border: 1px solid $component-active-border;
+  background: $component-active-bg;
+  color: $component-active-color;
+  font-weight: $font-weight-normal;
 
-    .ui-icon {
-        background-image: url("/stylesheets/jquery/images/ui-icons_ffffff_256x240.png");
-    }
+  .ui-icon {
+    background-image: url("../../../stylesheets/jquery/images/ui-icons_ffffff_256x240.png");
+  }
 }
 
 .ui-state-active a,
 .ui-state-active a:link,
 .ui-state-active a:visited {
-    color: $component-active-color;
-    text-decoration: none;
+  color: $component-active-color;
+  text-decoration: none;
+}
+
+.ui-sortable-helper {
+  background-color: $body-bg;
+  @include nice-shadow(4);
 }
 
 
-/**
- * Menu (e.g. autocomplete)
- */
+//== Menu (e.g. autocomplete)
+//
 
 .ui-menu {
-    padding: 3px;
-    border-radius: $panel-border-radius;
-    box-shadow: $panel-shadow;
+  @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 {
-    border-radius: $panel-border-radius;
+  border-radius: $panel-border-radius;
 }
 
 
-/**
- * Dialogs
- */
+//== Dialogs
+//
 
 .modal {
-    background: $body-bg;
-    z-index: 50;
+  z-index: 50;
+  background: $body-bg;
 
-    h3.title {
-        display: none;
-    }
+  h3.title {
+    display: none;
+  }
 
-    p.buttons {
-        margin-bottom: 0;
-        text-align: right;
-    }
+  p.buttons {
+    margin-bottom: 0;
+    text-align: right;
+  }
 }
 
 .ui-dialog {
-    &.ui-widget-content {
-        padding: 3px;
-        border: 0 none;
-        box-shadow: $panel-shadow;
-    }
+  &.ui-widget-content {
+    @include nice-shadow(5);
+    padding: 3px;
+    border: 0 none;
 
-    .ui-dialog-titlebar-close {
-        right: .5em;
+    .ui-dialog-content {
+      padding: 1em;
     }
+  }
+
+  .ui-dialog-titlebar-close {
+    right: .5em;
+  }
+
+  input[type="button"] {
+    @include button-variant($btn-link-color, $btn-link-bg, $btn-link-border);
+  }
 }
 
 .ui-widget-overlay {
-    background: #000;
+  background: #000;
 }
 
 
-/**
- * Datepicker
- */
+//== Datepicker
+//
 
 img.ui-datepicker-trigger {
-    margin-left: 4px;
-    cursor: pointer;
-    vertical-align: middle;
+  margin-left: 4px;
+  vertical-align: middle;
+  cursor: pointer;
 }
 
 .ui-datepicker {
-    padding: 3px;
-    box-shadow: $panel-shadow;
+  @include nice-shadow(3);
+  padding: .3em .6em .6em;
+  border: 0 none;
 
-    .ui-datepicker-header {
-        padding: .3em;
+  .ui-datepicker-header {
+    margin: 0 -.3em;
+    padding: .3em;
+  }
+
+  .ui-datepicker-prev {
+    left: .3em;
+  }
+
+  .ui-datepicker-next {
+    right: .3em;
+  }
+
+  .ui-datepicker-prev,
+  .ui-datepicker-next {
+    top: .3em;
+    border: 0 none;
+    background: transparent;
+  }
+
+  .ui-datepicker-title {
+    margin: 0 (1.8em + .3em);
+  }
+
+  select.ui-datepicker-month,
+  select.ui-datepicker-year {
+    width: 49%;
+    height: 1.8em;
+    margin: 0;
+  }
+
+  select.ui-datepicker-year {
+    margin-left: 1%;
+  }
+
+  .ui-datepicker-calendar {
+    margin: 0;
+    table-layout: fixed;
+
+    .ui-state-default {
+      border-color: $body-bg;
+      background: $body-bg;
     }
 
-    .ui-datepicker-prev {
-        left: .3em;
+    .ui-state-focus,
+    .ui-state-hover {
+      border-color: $component-active-bg;
+      background: $component-active-bg;
+      color: $component-active-color;
     }
 
-    .ui-datepicker-next {
-        right: .3em;
+    .ui-state-active {
+      border-color: $highlight-border;
+      background: $highlight-bg;
+      color: $highlight-text;
     }
 
-    .ui-datepicker-prev,
-    .ui-datepicker-next {
-        top: .3em;
-        border: 0 none;
-        background: transparent;
+    .ui-datepicker-today {
+      .ui-state-highlight {
+        border-color: $component-active-border;
+      }
     }
 
-    .ui-datepicker-title {
-        margin: 0 (1.8em + .3em);
+    .ui-datepicker-current-day {
+      .ui-state-active {
+        border-color: $highlight-border;
+      }
     }
 
-    select.ui-datepicker-month,
-    select.ui-datepicker-year {
-        width: 49%;
-        height: 1.8em;
-        margin: 0;
+    td {
+      padding: 0 1px 1px 0;
+      text-align: right;
+
+      a {
+        padding-right: .4em;
+        padding-left: 0;
+        border-radius: $border-radius-base;
+      }
+
+      &.ui-datepicker-week-col {
+        padding-right: $table-condensed-cell-padding;
+        color: $gray-600;
+      }
     }
+  }
 
-    select.ui-datepicker-year {
-        margin-left: 1%;
-    }
-
-    .ui-datepicker-calendar {
-        table-layout: fixed;
-
-        .ui-state-default {
-            border-color: $body-bg;
-            background: $body-bg;
-        }
-
-        .ui-state-focus,
-        .ui-state-hover {
-            border-color: $component-active-bg;
-            background: $component-active-bg;
-            color: $component-active-color;
-        }
-
-        .ui-state-active {
-            border-color: $highlight-border;
-            background: $highlight-bg;
-            color: $highlight-text;
-        }
-
-        .ui-datepicker-today {
-            .ui-state-highlight {
-                border-color: $component-active-border;
-            }
-        }
-
-        .ui-datepicker-current-day {
-            .ui-state-active {
-                border-color: $highlight-border;
-            }
-        }
-
-        td {
-            padding: 0 1px 1px 0;
-            text-align: right;
-
-            a {
-                padding-right: .4em;
-                padding-left: 0;
-                border-radius: $border-radius-base;
-            }
-
-            &.ui-datepicker-week-col {
-                padding-right: $table-condensed-cell-padding;
-                color: $gray-light;
-            }
-        }
+  .ui-datepicker-buttonpane {
+    @include clearfix;
+    margin: .6em 0 0;
+    padding: .6em 0 0;
+
+    button {
+      margin: 0;
+      padding: $btn-padding-vertical $btn-padding-horizontal;
     }
+  }
+}
+
+.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

@@ -2,67 +2,246 @@
 // WYSIWYG icons
 // --------------------------------------------------
 
-.jstElements {
-    @extend %clearfix;
+// For Redmine 4.0+
+#content {
+  div.jstTabs.tabs {
+    height: auto;
 
-    .box & {
+    @if $flexbox-layout {
+      @media screen and (max-width: $redmine-responsive-max) {
+        clear: both;
+      }
+    }
+
+    > ul {
+      width: 100%;
+      height: auto;
+
+      > li {
+        height: auto;
+        margin: 0;
+
+        > a {
+          &:hover,
+          &:focus {
+            border-color: darken($tab-hover-border, 3%) darken($tab-hover-border, 3%) $tab-border;
+            background-color: darken($tab-hover-bg, 3%);
+          }
+
+          &.selected {
+            border-color: $tab-active-border $tab-active-border $tab-active-bg;
+            background: $tab-active-bg;
+            color: $tab-active-text;
+
+            &.tab-preview {
+              border-bottom-color: $wiki-preview-bg;
+              background-color: $wiki-preview-bg;
+            }
+          }
+        }
+
+        @if $flexbox-layout {
+          align-self: flex-end;
+        }
+
+        &::before {
+          content: none;
+        }
+
+        &.tab-elements {
+          flex: 1;
+          margin-left: 5px;
+        }
+      }
+    }
+
+    .jstElements {
+      height: auto;
+    }
+  }
+
+  .jstEditor {
+    .wiki-preview {
+      padding: $panel-body-padding;
+      border: 1px solid $input-border;
+      border-radius: $input-border-radius;
+      background-color: $wiki-preview-bg;
+
+      p {
         padding: 0;
+      }
+    }
+  }
+}
+
+div.jstElements {
+  @extend %clearfix;
+  line-height: normal;
+
+  .box & {
+    display: block;
+    padding: 0;
+
+    .jstSpacer {
+      margin-right: 4px;
     }
 
-    button {
-        margin-bottom: 5px;
-        box-shadow: none;
-        vertical-align: top;
-    }
-
-    .jstb_help {
+    @media (min-width: $screen-md) {
+      .jstb_help {
         margin-right: 0;
         margin-left: -6px;
         float: right;
+      }
     }
-}
+  }
 
-@if $use-font-awesome
-{
-    .jstElements {
-        button[type="button"] {
-            padding: 0;
-            background: $body-bg;
-            background-image: none;
-            color: $btn-default-color;
-            @include fa-icon();
+  button {
+    margin-right: 2px;
+    margin-bottom: 4px;
+    padding: 0;
+    border: 0;
+    opacity: 1;
+    background-color: transparent;
+    box-shadow: none;
+    color: $gray-800;
+    vertical-align: top;
 
-            &:before {
-                text-align: center;
-            }
-        }
-
-        .jstb_strong:before { content: $fa-var-bold; }
-        .jstb_em:before     { content: $fa-var-italic; }
-        .jstb_ins:before    { content: $fa-var-underline; }
-        .jstb_del:before    { content: $fa-var-strikethrough; }
-        .jstb_code:before   { content: $fa-var-code; }
-        .jstb_h1:before     { content: $fa-var-header; }
-        .jstb_h2:before     { content: $fa-var-header; font-size: 11px; }
-        .jstb_h3:before     { content: $fa-var-header; font-size: 9px; }
-        .jstb_ul:before     { content: $fa-var-list-ul; }
-        .jstb_ol:before     { content: $fa-var-list-ol; }
-        .jstb_bq:before     { content: $fa-var-indent; }
-        .jstb_unbq:before   { content: $fa-var-outdent; }
-        .jstb_pre:before    { content: $fa-var-terminal; }
-        .jstb_link:before   { content: $fa-var-link; }
-        .jstb_img:before    { content: $fa-var-image; }
-
-        button.jstb_help {
-            color: $link-color;
-
-            &:hover {
-                color: $link-hover-color;
-            }
-
-            &:before {
-                content: $fa-var-question-circle;
-            }
-        }
+    &::before {
+      text-align: center;
     }
+
+    &:hover,
+    &:focus {
+      background-color: darken($tab-hover-bg, 3%);
+      color: $gray-900;
+    }
+  }
+
+  %jstb-icon {
+    @include fa-icon;
+    background: transparent;
+    background-image: none;
+  }
+
+  .jstb_strong {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-bold; }
+  }
+
+  .jstb_em {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-italic; }
+  }
+
+  .jstb_ins {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-underline; }
+  }
+
+  .jstb_del {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-strikethrough; }
+  }
+
+  .jstb_code {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-code; }
+  }
+
+  .jstb_h1 {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-header; }
+  }
+
+  .jstb_h2 {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-header; font-size: .7857em; }
+  }
+
+  .jstb_h3 {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-header; font-size: .6429em; }
+  }
+
+  .jstb_ul {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-list-ul; }
+  }
+
+  .jstb_ol {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-list-ol; }
+  }
+
+  .jstb_bq {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-indent; }
+  }
+
+  .jstb_unbq {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-outdent; }
+  }
+
+  .jstb_pre {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-terminal; }
+  }
+
+  .jstb_link {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-link; }
+  }
+
+  .jstb_img {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-image; }
+  }
+
+  .jstb_cut {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-scissors; }
+  }
+
+  .jstb_precode,
+  // For plugin https://github.com/mediatainment/redmine_codebutton
+  .jstb_codehighlight {
+    @extend %jstb-icon;
+    color: $brand-danger;
+
+    &::before { content: $fa-var-code; }
+  }
+
+  .jstb_table {
+    @extend %jstb-icon;
+
+    &::before { content: $fa-var-table; }
+  }
+
+  button.jstb_help {
+    @extend %jstb-icon;
+    color: $link-color;
+
+    &:hover {
+      color: $link-hover-color;
+    }
+
+    &::before { content: $fa-var-question-circle; }
+  }
 }

src/sass/components/_login.scss

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

src/sass/components/_pagination.scss

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

src/sass/components/_plugins.scss

@@ -1,72 +1,890 @@
+//
+// Additionals
+// https://www.redmine.org/plugins/additionals
+// --------------------------------------------------
+
+#sidebar .sidebar-additionals {
+  ul,
+  ol {
+    margin: 0 0 ($line-height-computed * .5);
+    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
+// Forked from: https://github.com/backlogs/redmine_backlogs
 // --------------------------------------------------
 
 #backlogs_view_issues_sidebar {
-    > a {
-        display: block;
-        padding: $sidebar-padding-vertical $sidebar-padding-horizontal;
-        border: 1px solid transparent;
+  > a {
+    display: block;
+    padding: $sidebar-padding-vertical $sidebar-padding-horizontal;
+    border: 1px solid transparent;
 
-        @if $sidebar-position == "left" {
-            margin-right: -($sidebar-padding-horizontal);
-            border-left-width: 3px;
-            border-radius: $border-radius-large 0 0 $border-radius-large;
-        } @else {
-            margin-left: -($sidebar-padding-horizontal);
-            border-right-width: 3px;
-            border-radius: 0 $border-radius-large $border-radius-large 0;
-        }
-
-        &:hover {
-            background-color: $sidebar-link-hover-bg;
-            text-decoration: none;
-        }
-
-        + br {
-            display: none;
-        }
+    @if $sidebar-position == "left" {
+      margin-right: -($sidebar-padding-horizontal);
+      border-left-width: 3px;
+      border-radius: $border-radius-large 0 0 $border-radius-large;
+    } @else {
+      margin-left: -($sidebar-padding-horizontal);
+      border-right-width: 3px;
+      border-radius: 0 $border-radius-large $border-radius-large 0;
     }
+
+    &:hover {
+      background-color: $sidebar-link-hover-bg;
+      text-decoration: none;
+    }
+
+    + br {
+      display: none;
+    }
+  }
+
+  .flyout-menu & {
+    a {
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+
+  .burndown_chart {
+    max-width: $sidebar-width-computed;
+  }
+}
+
+
+//
+// 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 * .5;
+
+      &: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 {
+    display: block;
+    position: relative;
+    margin: -($line-height-computed * .5 + 1px) ($bubble-padding-horizontal - $padding-small-vertical) 0;
+    float: right;
+    border: 0;
+    background-color: $body-bg;
+    text-align: right;
+  }
+}
+
+.contextual {
+  .icon-heart,
+  .icon-heart-off {
+    margin-left: $padding-small-vertical;
+    background-image: none;
+  }
+
+  .heart-link-with-count {
+    margin-right: $padding-small-vertical;
+    margin-left: $padding-small-vertical;
+
+    > .heart-count-number {
+      display: inline-block;
+      min-width: 1em;
+      margin: 0 0 0 3px;
+      padding: 1px 4px;
+      border-radius: $border-radius-base;
+      background-color: $btn-default-bg;
+      color: $btn-default-color;
+      text-align: center;
+
+      &::before {
+        content: "";
+      }
+    }
+  }
+}
+
+#content > .contextual {
+  > span.heart-link-with-count {
+    padding: 0;
+    border: 0;
+    background: transparent;
+
+    > a:first-child {
+      margin-right: 0;
+      margin-left: 4px;
+      padding-right: floor($btn-padding-horizontal-small * .5);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+
+      + a {
+        min-width: unset;
+        margin-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
 }
 
 
 //
 // Redmine Time Tracker
+// https://github.com/fernandokosh/redmine_time_tracker
 // --------------------------------------------------
 
-@if $use-font-awesome {
-    .icon.icon-start,
-    .icon.icon-stop {
-        background-image: none;
-    }
-
-    .icon.icon-start {
-        color: $icon-success-color;
-
-        &:hover,
-        &:focus {
-            color: $icon-success-color;
-        }
-
-        &:before {
-            content: $fa-var-clock-o;
-        }
-    }
-
-    .icon.icon-stop {
-        color: $icon-danger-color;
-
-        &:hover,
-        &:focus {
-            color: $icon-danger-color;
-        }
-
-        &:before {
-            content: $fa-var-history;
-        }
-    }
-
-    .time-tracker-quick-menu:empty {
-        display: none;
-    }
+.tt_list_button {
+  @extend %fa-icon;
+  font-size: $fa-font-size-base;
+}
+
+.icon,
+.tt_list_button {
+  &.icon-start,
+  &.icon-stop {
+    background-image: none;
+  }
+
+  &.icon-start {
+    @include link-variant(success);
+
+    &::before {
+      content: $fa-var-clock-o;
+    }
+  }
+
+  &.icon-stop {
+    @include link-variant(danger);
+
+    &::before {
+      content: $fa-var-history;
+    }
+  }
+}
+
+.time-tracker-quick-menu:empty {
+  display: none;
+}
+
+#user-time-bookings-list {
+  clear: both;
+}
+
+
+//
+// RedmineUP
+// https://www.redmineup.com/pages/plugins
+// --------------------------------------------------
+
+h2 {
+  .scope_title,
+  .live_search,
+  .tags {
+    vertical-align: top;
+  }
+
+  .live_search {
+    margin-left: $padding-side * .5;
+  }
+
+  .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 * -.5) 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 {
+  li {
+    a {
+      margin: 0;
+      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;
+  }
+}
+
+
+//
+// Redmine custom menu
+// http://rmplus.pro/en/redmine/plugins/custom_menu
+// --------------------------------------------------
+
+#top-menu {
+  .cm-menu-header {
+    > li {
+      margin: 0;
+
+      > a,
+      > .title {
+        line-height: $input-height-base;
+      }
+
+      > .cm-menu-divider {
+        height: 18px;
+        margin: 5px 4px 0 5px;
+        border-top: 0;
+        border-left: 1px solid;
+        opacity: .3;
+      }
+    }
+
+    .drdn-trigger {
+      font-size: $font-size-base;
+    }
+  }
+
+  .dropdown {
+    .dropdown-menu > li a:hover,
+    .dropdown-menu > li a:focus,
+    .dropdown-submenu:hover a,
+    .dropdown-submenu:focus a {
+      background-color: $brand-primary;
+      color: $brand-text;
+    }
+  }
+
+  .rm-icon {
+    &::before {
+      font-size: $fa-font-size-base;
+    }
+  }
+
+  #quick-search {
+    margin: 0;
+
+    form > input {
+      width: $quick-search-width * .5;
+      min-width: $quick-search-width * .5;
+    }
+
+    a {
+      line-height: inherit;
+    }
+  }
+}
+
+
+//
+// Redmine codebutton
+// https://github.com/mediatainment/redmine_codebutton
+// --------------------------------------------------
+
+#toolbar-code-options {
+  select {
+    width: 100%;
+  }
+
+  .buttons {
+    white-space: nowrap;
+  }
+}
+
+
+//
+// Redmine Stuff To Do
+// https://github.com/raafael911/stuff_to_do_plugin
+// --------------------------------------------------
+
+#stuff-to-do {
+  p {
+    @if $sidebar-position == "left" {
+      margin-right: -($sidebar-padding-horizontal);
+    } @else {
+      margin-left: -($sidebar-padding-horizontal);
+    }
+
+    > a {
+      display: block;
+      padding: $sidebar-padding-vertical $sidebar-padding-horizontal;
+
+      @if $sidebar-position == "left" {
+        border-radius: $border-radius-large 0 0 $border-radius-large;
+      } @else {
+        border-radius: 0 $border-radius-large $border-radius-large 0;
+      }
+
+      &:hover {
+        background-color: $sidebar-link-hover-bg;
+        text-decoration: none;
+      }
+    }
+
+    > br {
+      display: none;
+    }
+  }
+}
+
+// Note: the following applies to the latest version
+// of Stuff To Do plugin from the master branch.
+
+.controller-stuff_to_do {
+  .menu {
+    label,
+    select {
+      margin-bottom: 5px;
+    }
+  }
+
+  .stuff-to-do-item {
+    padding: $table-cell-padding;
+    border: 1px solid $table-border-color;
+    border-width: $table-list-item-border;
+    background-color: $body-bg;
+  }
+
+  .pane {
+    ol {
+      padding: 0;
+    }
+
+    .issue-details {
+      width: 80%;
+      margin: 0;
+
+      a {
+        img {
+          display: none;
+        }
+      }
+    }
+
+    .progress {
+      width: 20%;
+      margin: 0;
+    }
+
+    .estimate {
+      top: $table-cell-padding - 1px;
+      right: $table-cell-padding;
+      left: auto;
+      width: 20%;
+      font-size: $font-size-small;
+      text-align: right;
+    }
+  }
+}
+
+
+//
+// Redmine WikiNG
+// https://github.com/martin-denizet/wiking
+// --------------------------------------------------
+
+div.wiking {
+  &.flash {
+    &.warning,
+    &.notice,
+    &.tip {
+      background-image: none;
+    }
+
+    &.tip {
+      &::before {
+        content: $fa-var-lightbulb-o;
+      }
+    }
+  }
 }

src/sass/components/_print.scss

@@ -3,39 +3,77 @@
 // --------------------------------------------------
 
 @media print {
-    #top-menu,
-    #header,
-    #main-menu,
-    #sidebar,
-    #footer,
-    #wiki_add_attachment,
-    .hide-when-print,
-    .contextual,
-    .other-formats {
-        display: none;
+  #top-menu,
+  #header,
+  #main-menu,
+  #sidebar,
+  #footer,
+  #wiki_add_attachment,
+  .hide-when-print,
+  .contextual,
+  .other-formats {
+    display: none;
+  }
+
+  .pagination {
+    .pages,
+    .per-page {
+      display: none;
+    }
+  }
+
+  #main {
+    display: block;
+    overflow: visible !important; // stylelint-disable-line declaration-no-important
+    background: $white;
+  }
+
+  #content {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: visible !important; // stylelint-disable-line declaration-no-important
+    border: 0;
+    background: $white;
+  }
+
+  .autoscroll {
+    overflow-x: visible;
+  }
+
+  a {
+    // stylelint-disable declaration-no-important
+    padding: 0 !important;
+    background-color: transparent !important;
+    color: $black !important;
+
+    &::before,
+    &::after {
+      display: none !important;
     }
 
-    #main {
-        background: #fff;
+    &.issue.closed {
+      text-decoration: line-through;
+    }
+  }
+
+  table.list {
+    tr {
+      background-color: transparent;
     }
 
-    #content {
-        width: 100%;
-        margin: 0;
+    th,
+    td {
+      border: 1px solid $gray-500;
+      background-color: transparent;
+
+      &.buttons {
         padding: 0;
-        border: 0;
-        background: #fff;
-        overflow: visible !important;
-    }
 
-    .autoscroll {
-        overflow-x: visible;
-    }
-
-    table.list {
-        th,
-        td {
-            border: 1px solid #aaa;
+        a {
+          display: none;
         }
+      }
     }
+  }
 }

src/sass/components/_progress.scss

@@ -3,48 +3,74 @@
 // --------------------------------------------------
 
 table.progress {
-    margin-top: 1px;
-    margin-right: 5px;
-    float: left;
-    border: 1px solid rgba(#000, .1);
-    empty-cells: show;
+  width: 80px;
+  margin-top: 3px;
+  margin-right: 5px;
+  float: left;
+  empty-cells: show;
+  border: 0 none;
 
-    td.done_ratio & {
-        float: none;
-        margin-right: auto;
-        margin-left: auto;
+  .version-overview & {
+    width: 40em;
+  }
+
+  td.done_ratio & {
+    margin-right: auto;
+    margin-left: auto;
+    float: none;
+  }
+
+  tr {
+    background: transparent !important; // stylelint-disable-line declaration-no-important
+  }
+
+  td {
+    height: $progress-height;
+    padding: 0;
+    border: 0 none;
+
+    &:first-child {
+      border-top-left-radius: $progress-height * .5;
+      border-bottom-left-radius: $progress-height * .5;
     }
 
-    td {
-        height: 12px;
-        padding: 0;
-        border: 0 none;
-
-        &.closed {
-            background-color: $progress-bar-success-bg;
-        }
-
-        &.done {
-            background-color: mix($progress-bar-success-bg, $progress-bg, 50%);
-        }
-
-        &.todo {
-            background-color: $progress-bg;
-        }
+    &:last-child {
+      border-top-right-radius: $progress-height * .5;
+      border-bottom-right-radius: $progress-height * .5;
     }
+
+    &.done {
+      background-color: $progress-bar-bg !important; // stylelint-disable-line declaration-no-important
+    }
+
+    &.closed {
+      background-color: $progress-bar-success-bg !important; // stylelint-disable-line declaration-no-important
+    }
+
+    &.todo {
+      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 {
-    &.percent {
-        margin-bottom: 0;
-        font-size: $font-size-small;
-    }
+  &.percent {
+    margin-bottom: 0;
+    font-size: $font-size-small;
+  }
 
-    &.progress-info {
-        margin-top: -4px;
-        margin-bottom: 0;
-        clear: left;
-        color: #777;
-        font-size: 80%;
-    }
+  &.progress-info {
+    clear: left;
+    color: $gray-700;
+    font-size: 80%;
+  }
 }

src/sass/components/_responsive.scss

@@ -0,0 +1,464 @@
+.hidden,
+.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 {
+        height: $responsive-header-height;
+        background-color: $header-bg;
+
+        .jump-box-arrow {
+          &::before {
+            line-height: $responsive-header-height;
+          }
+        }
+
+        #quick-search {
+          select {
+            top: 0;
+            height: $responsive-header-height;
+            box-shadow: none;
+          }
+        }
+      }
+
+      #main {
+        padding-top: $responsive-header-height;
+      }
+    }
+
+    #header {
+      #project-jump {
+        padding: 0 $responsive-header-height 0 0;
+
+        &.expanded {
+          .drdn-trigger {
+            &::before {
+              padding: 0;
+              transform: rotate(180deg);
+            }
+          }
+        }
+
+        .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 {
+            @include fa-icon;
+            content: $fa-var-chevron-down;
+            position: relative;
+            top: -.1em;
+            width: $responsive-header-height * .75;
+            padding: 0;
+            transform: none;
+            font-size: .8em;
+            text-align: center;
+          }
+
+          &::after {
+            display: none;
+          }
+        }
+
+        .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;
+      line-height: $responsive-header-height;
+
+      &:focus {
+        text-decoration: none;
+      }
+    }
+
+    .flyout-menu {
+      background-color: $flyout-menu-bg;
+      color: $flyout-menu-text;
+
+      .search-magnifier {
+        left: 18px;
+      }
+
+      &__search {
+        height: $responsive-header-height;
+        padding: ($padding-side * .5);
+        line-height: normal;
+
+        input[type="text"] {
+          height: $responsive-header-height - $padding-side;
+          line-height: $responsive-header-height - $padding-side;
+        }
+      }
+
+      &__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,
+      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 !important; // stylelint-disable-line declaration-no-important
+
+          &.additionals {
+            padding-left: 32px !important; // stylelint-disable-line declaration-no-important
+
+            &::before {
+              margin-right: $padding-small-vertical;
+              font-size: $fa-font-size-base;
+            }
+          }
+        }
+      }
+
+      #watchers {
+        .contextual {
+          padding-top: $line-height-computed * .5;
+          padding-bottom: $line-height-computed * .5;
+        }
+
+        .watchers {
+          li {
+            margin: ($line-height-computed * .5) 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;
+            }
+          }
+        }
+      }
+    }
+
+    #query_form_content {
+      fieldset {
+        margin-bottom: $line-height-computed;
+      }
+    }
+
+    .search-magnifier {
+      &--flyout {
+        line-height: normal;
+      }
+    }
+
+    .splitcontentleft {
+      margin-bottom: $line-height-computed;
+      padding-right: 0;
+      float: none;
+    }
+
+    .splitcontentright {
+      padding-left: 0;
+      float: none;
+    }
+
+    .attributes .splitcontentleft {
+      margin-bottom: 0;
+    }
+
+    .tabular {
+      input[type="checkbox"],
+      input[type="radio"],
+      input.date {
+        width: auto;
+        max-width: 95%;
+      }
+
+      label {
+        float: none;
+      }
+    }
+
+    .pagination {
+      .pages {
+        display: block;
+      }
+    }
+
+    p.buttons,
+    .other-formats > span,
+    #wiki_add_attachment > p,
+    #content > .contextual,
+    #content > .contextual > span,
+    #query_form > .contextual,
+    #query_form_with_buttons > .contextual {
+      margin-bottom: $line-height-computed - $padding-small-horizontal;
+      padding: 0;
+      float: none;
+      text-align: left;
+
+      a {
+        padding: $btn-padding-vertical $btn-padding-horizontal-small;
+        border: 1px solid $pagination-border;
+        border-radius: $border-radius-base;
+        background-color: $pagination-bg;
+        color: $pagination-color;
+        font-weight: $font-weight-normal;
+
+        &:hover,
+        &:focus {
+          border-color: $pagination-hover-border;
+          background-color: $pagination-hover-bg;
+          color: $pagination-hover-color;
+          text-decoration: none;
+        }
+
+        &.icon {
+          padding-left: 20px + $btn-padding-horizontal-small;
+          background-position: $btn-padding-horizontal-small 50%;
+        }
+      }
+
+      a,
+      input,
+      select,
+      label {
+        margin-top: 0;
+        margin-bottom: 5px;
+      }
+
+      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 $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;
+          }
+        }
+      }
+    }
+
+    // For Redmine 3.4+
+    #my-page {
+      #list-left {
+        width: 100%;
+        padding-right: 0;
+        float: none;
+      }
+
+      #list-right {
+        width: 100%;
+        padding-left: 0;
+        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 * .5;
+      }
+
+      .buttons {
+        input[type="button"] {
+          display: inline-block;
+        }
+      }
+    }
+  }
+}

src/sass/components/_rouge.scss

@@ -0,0 +1,320 @@
+.syntaxhl {
+  color: #24292e;
+
+  .hll {
+    background-color: #ffc;
+  }
+
+  // Comment
+  .c {
+    color: #6a737d;
+  }
+
+  // Keyword
+  .k {
+    color: #d73a49;
+  }
+
+  // Comment.Hashbang
+  .ch {
+    color: #6a737d;
+  }
+
+  // Comment.Multiline
+  .cm {
+    color: #6a737d;
+  }
+
+  // Comment.Preproc
+  .cp {
+    color: #d73a49;
+  }
+
+  // Comment.PreprocFile
+  .cpf {
+    color: #032f62;
+  }
+
+  // Comment.Single
+  .c1 {
+    color: #6a737d;
+  }
+
+  // Comment.Special
+  .cs {
+    color: #6a737d;
+  }
+
+  // Generic.Deleted
+  .gd {
+    background-color: #ffeef0;
+    color: #b31d28;
+  }
+
+  // Generic.Heading
+  .gh {
+    color: #005cc5;
+  }
+
+  // Generic.Inserted
+  .gi {
+    background-color: #f0fff4;
+    color: #22863a;
+  }
+
+  // Generic.Strong
+  .gs {
+    font-weight: bold;
+  }
+
+  // Generic.Subheading
+  .gu {
+    color: #6f42c1;
+    font-weight: bold;
+  }
+
+  // Generic.Traceback
+  .gt {
+    color: #04d;
+  }
+
+  // Keyword.Constant
+  .kc {
+    color: #005cc5;
+  }
+
+  // Keyword.Declaration
+  .kd {
+    color: #d73a49;
+  }
+
+  // Keyword.Namespace
+  .kn {
+    color: #d73a49;
+  }
+
+  // Keyword.Pseudo
+  .kp {
+    color: #d73a49;
+  }
+
+  // Keyword.Reserved
+  .kr {
+    color: #d73a49;
+  }
+
+  // Keyword.Type
+  .kt {
+    color: #d73a49;
+  }
+
+  // Literal.Number
+  .m {
+    color: #005cc5;
+  }
+
+  // Literal.String
+  .s {
+    color: #032f62;
+  }
+
+  // Name.Attribute
+  .na {
+    color: #005cc5;
+  }
+
+  // Name.Builtin
+  .nb {
+    color: #005cc5;
+  }
+
+  // Name.Class
+  .nc {
+    color: #6f42c1;
+  }
+
+  // Name.Constant
+  .no {
+    color: #005cc5;
+  }
+
+  // Name.Decorator
+  .nd {
+    color: #6f42c1;
+  }
+
+  // Name.Entity
+  .ni {
+    color: #005cc5;
+  }
+
+  // Name.Exception
+  .ne {
+    color: #005cc5;
+  }
+
+  // Name.Function
+  .nf {
+    color: #6f42c1;
+  }
+
+  // Name.Label
+  .nl {
+    color: #005cc5;
+  }
+
+  // Name.Namespace
+  .nn {
+    color: #6f42c1;
+  }
+
+  // Name.Tag
+  .nt {
+    color: #22863a;
+  }
+
+  // Name.Variable
+  .nv {
+    color: #24292e;
+  }
+
+  // Operator
+  .o {
+    color: #d73a49;
+  }
+
+  // Operator.Word
+  .ow {
+    color: #d73a49;
+  }
+
+  // Text.Whitespace
+  .w {
+    color: #bbb;
+  }
+
+  // Literal.Number.Bin
+  .mb {
+    color: #005cc5;
+  }
+
+  // Literal.Number.Float
+  .mf {
+    color: #005cc5;
+  }
+
+  // Literal.Number.Hex
+  .mh {
+    color: #005cc5;
+  }
+
+  // Literal.Number.Integer
+  .mi {
+    color: #005cc5;
+  }
+
+  // Literal.Number.Oct
+  .mo {
+    color: #005cc5;
+  }
+
+  // Literal.String.Affix
+  .sa {
+    color: #d73a49;
+  }
+
+  // Literal.String.Backtick
+  .sb {
+    color: #032f62;
+  }
+
+  // Literal.String.Char
+  .sc {
+    color: #032f62;
+  }
+
+  // Literal.String.Delimiter
+  .dl {
+    color: #d73a49;
+  }
+
+  // Literal.String.Doc
+  .sd {
+    color: #032f62;
+  }
+
+  // Literal.String.Double
+  .s2 {
+    color: #032f62;
+  }
+
+  // Literal.String.Escape
+  .se {
+    color: #032f62;
+  }
+
+  // Literal.String.Heredoc
+  .sh {
+    color: #032f62;
+  }
+
+  // Literal.String.Interpol
+  .si {
+    color: #005cc5;
+  }
+
+  // Literal.String.Other
+  .sx {
+    color: #032f62;
+  }
+
+  // Literal.String.Regex
+  .sr {
+    color: #032f62;
+  }
+
+  // Literal.String.Single
+  .s1 {
+    color: #032f62;
+  }
+
+  // Literal.String.Symbol
+  .ss {
+    color: #005cc5;
+  }
+
+  // Name.Builtin.Pseudo
+  .bp {
+    color: #005cc5;
+  }
+
+  // Name.Function.Magic
+  .fm {
+    color: #005cc5;
+  }
+
+  // Name.Variable.Class
+  .vc {
+    color: #24292e;
+  }
+
+  // Name.Variable.Global
+  .vg {
+    color: #24292e;
+  }
+
+  // Name.Variable.Instance
+  .vi {
+    color: #24292e;
+  }
+
+  // Name.Variable.Magic
+  .vm {
+    color: #005cc5;
+  }
+
+  // Literal.Number.Integer.Long
+  .il {
+    color: #005cc5;
+  }
+}

src/sass/components/_simple-list.scss

@@ -2,99 +2,146 @@
 // Activity and search results list
 // --------------------------------------------------
 
-
-#search-results,
-div#activity dl {
-    margin-left: $padding-side;
-}
-
-div#activity,
+#activity dl,
 #search-results {
-    dd {
-        margin-bottom: $line-height-computed;
-        padding-left: $padding-side;
-    }
-
-    dt {
-        margin-bottom: 2px;
-        padding-left: $padding-side;
-        background-repeat: no-repeat;
-        background-position: 0 center;
-    }
-
-    span.project:after {
-        content: " -";
-    }
-
-    span.description {
-        display: block;
-        color: $gray;
-        font-style: italic;
-    }
+  margin-left: $padding-side;
 }
 
-div#activity {
-    dt {
-        &.me .time {
-            border-bottom: 1px solid $gray-lighter;
-        }
+#activity,
+#search-results {
+  dd {
+    margin-bottom: $line-height-computed;
+    padding-top: .1em;
+  }
 
-        .time {
-            color: $gray;
-        }
-    }
+  dt {
+    padding-left: $padding-side;
+    background-repeat: no-repeat;
+    background-position: 0 center;
+  }
 
-    dd {
-        font-size: $font-size-small;
-    }
+  span.project::after {
+    content: " -";
+  }
 
-    dt.grouped,
-    dd.grouped {
-        margin-left: $padding-side;
-    }
+  span.description {
+    display: block;
+    color: $gray-700;
+    font-style: italic;
+  }
 }
 
-div#search-results-counts {
-    float: right;
+#activity {
+  $activity-avatar: 24px;
+  $activity-avatar-space: 5px;
+  $activity-indent: 20px;
 
-    ul {
-        @extend %clearfix;
+  @if $use-gravatars {
+    $activity-indent: $activity-indent + $activity-avatar + $activity-avatar-space;
+  }
+
+  h3,
+  h4 {
+    margin: 0 0 $line-height-computed;
+    padding-bottom: .2em;
+    border-bottom: 1px dotted $gray-600;
+    font-size: $font-size-h4;
+    font-weight: $font-weight-normal;
+  }
+
+  dt {
+    &.grouped {
+      margin-left: $activity-indent;
     }
 
-    li {
-        margin-left: 1em;
+    &.me .time {
+      border-bottom: 1px solid $gray-400;
+    }
+
+    .time {
+      color: $gray-700;
+    }
+
+    @if $use-gravatars {
+      .gravatar {
+        top: 0;
+        margin-top: -2px;
+        margin-right: $activity-avatar-space;
         float: left;
-        list-style-type: none;
+      }
     }
+  }
+
+  dd {
+    overflow: hidden;
+    font-size: $font-size-small;
+
+    &.grouped {
+      margin-left: $activity-indent;
+    }
+  }
+}
+
+#search-results-counts {
+  float: right;
+
+  ul {
+    @extend %clearfix;
+  }
+
+  li {
+    margin-left: 1em;
+    float: left;
+    list-style-type: none;
+  }
 }
 
 
 // Search form
 
 #search-form {
-    input,
-    select {
-        margin-right: 5px;
-    }
+  margin-bottom: $line-height-computed;
 
-    label {
-        display: inline-block;
-        margin-right: 5px;
-        @include checkbox;
-    }
+  input,
+  select {
+    margin-right: 5px;
+    margin-bottom: $line-height-computed * .5;
+  }
 
-    p:last-child {
-        margin-bottom: 0;
+  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 {
+    margin-bottom: 0;
+  }
 }
 
 
 // Search results highlight
 
 .highlight {
-    background-color: #fe8;
+  background-color: saturate(shade($yellow, 100), 25%);
+  color: saturate(shade($yellow, 800), 25%);
 
-    &.token-1 { background-color: #fba; }
-    &.token-2 { background-color: #afb; }
-    &.token-3 { background-color: #aef; }
+  &.token-1 {
+    background-color: saturate(shade($red, 100), 25%);
+    color: saturate(shade($red, 800), 25%);
+  }
+
+  &.token-2 {
+    background-color: saturate(shade($green, 100), 25%);
+    color: saturate(shade($green, 800), 25%);
+  }
+
+  &.token-3 {
+    background-color: saturate(shade($blue, 100), 25%);
+    color: saturate(shade($blue, 800), 25%);
+  }
 }

src/sass/components/_tabs.scss

@@ -2,143 +2,195 @@
 // Tabs
 // --------------------------------------------------
 
+$tabs-height: $line-height-computed + $tab-padding-vertical * 2 + 1px + 1px;
+
 .tabs {
-    $tabs-buttons-width: 40px;
+  $tabs-buttons-width: 40px;
 
-    position: relative;
-    margin-bottom: $line-height-computed;
+  position: relative;
+  overflow: hidden;
+
+  @if not $flexbox-layout {
     padding-right: $tabs-buttons-width;
-    overflow: hidden;
+  }
 
-    > ul {
-        width: 2000px; // stop it from breaking
-        margin: 0;
-        padding-left: 0;
-        border-bottom: 1px solid $tab-border;
-        list-style: none;
-        @extend %clearfix;
+  > ul {
+    box-sizing: border-box;
+    margin: 0;
+    padding-left: 0;
+    list-style: none;
 
-        > li {
-            margin-bottom: -1px;
-            float: left;
-
-            > a {
-                display: block;
-                min-width: 2em;
-                margin-right: 2px;
-                padding: $tab-padding-vertical $tab-padding-horizontal;
-                border: 1px solid transparent;
-                border-radius: $border-radius-base $border-radius-base 0 0;
-                text-align: center;
-
-                &:hover,
-                &:focus {
-                    border-color: $tab-hover-border $tab-hover-border $tab-border;
-                    background-color: $tab-hover-bg;
-                    text-decoration: none;
-                }
-
-                &.selected {
-                    border-color: $tab-active-border $tab-active-border $tab-active-bg;
-                    background: $tab-active-bg;
-                    color: $tab-active-text;
-                }
-            }
-        }
+    @if $flexbox-layout {
+      display: flex;
+      flex-wrap: nowrap;
+      height: $tabs-height;
+    } @else {
+      width: 2000px;
+      @extend %clearfix;
     }
 
-    .tabs-buttons {
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: $tabs-buttons-width;
-        padding-left: 5px;
-        background-color: $body-bg;
+    > li {
+      @if $flexbox-layout {
+        flex: 0 1 auto;
+      } @else {
+        float: left;
+      }
 
-        > button {
-            width: 50%;
-            height: $tab-padding-vertical * 2 + $line-height-computed;
-            margin: 0;
-            padding: 0;
-            float: left;
-            border: 0 none;
-            background-color: $body-bg;
-            background-repeat: no-repeat;
-            background-position: center center;
-            box-shadow: none;
-            opacity: .8;
-            @include transition(opacity .1s);
-
-            &:hover,
-            &:active {
-                opacity: 1;
-            }
-
-            &:active {
-                background-color: $tab-hover-bg;
-            }
-        }
-
-        .tab-left {
-            background-image: url("../images/bullet_arrow_left.png");
-        }
-
-        .tab-right {
-            background-image: url("../images/bullet_arrow_right.png");
-        }
+      > a {
+        display: block;
+        box-sizing: border-box;
+        min-width: 3em;
+        height: $tabs-height;
+        margin-right: 2px;
+        padding: $tab-padding-vertical $tab-padding-horizontal;
+        border: 1px solid transparent;
+        border-radius: $border-radius-base $border-radius-base 0 0;
+        text-align: center;
+        white-space: nowrap;
+      }
     }
+  }
+
+  .tabs-buttons {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: $tabs-buttons-width;
+    border-bottom: 1px solid $tab-border;
+    background-color: $body-bg;
+
+    > button {
+      width: 50%;
+      height: $tabs-height - 1px;
+      margin: 0;
+      padding: 0;
+      float: left;
+      transition: opacity $transition-time;
+      border: 0 none;
+      border-radius: 0;
+      opacity: $icon-opacity;
+      background-color: $body-bg;
+      background-repeat: no-repeat;
+      background-position: center center;
+      box-shadow: none;
+
+      &:hover,
+      &:active {
+        opacity: $icon-hover-opacity;
+      }
+
+      &:active {
+        background-color: $tab-hover-bg;
+      }
+
+      &.disabled {
+        opacity: $icon-opacity * .5;
+      }
+    }
+
+    .tab-left {
+      background-image: inline-svg("chevron-left.svg", (path: (fill: $btn-default-icon-color)));
+    }
+
+    .tab-right {
+      background-image: inline-svg("chevron-right.svg", (path: (fill: $btn-default-icon-color)));
+    }
+  }
 }
 
-/**
- * Specific tabs content layout
- */
+div.tabs:not(#main-menu) {
+  height: $tabs-height;
+  margin-bottom: $line-height-computed;
+
+  > ul {
+    margin: 0;
+    padding: 0;
+    border-bottom: 1px solid $tab-border;
+
+    > li {
+      margin: 0 0 -1px;
+      background: transparent;
+
+      > a {
+        padding: $tab-padding-vertical $tab-padding-horizontal;
+        border-color: transparent;
+        background: transparent;
+        color: $link-color;
+        font: inherit;
+
+        &:hover,
+        &:focus {
+          border-color: $tab-hover-border $tab-hover-border $tab-border;
+          background-color: $tab-hover-bg;
+          color: $tab-hover-text;
+          text-decoration: none;
+        }
+
+        &.selected {
+          border-color: $tab-active-border $tab-active-border $tab-active-bg;
+          background: $tab-active-bg;
+          color: $tab-active-text;
+        }
+      }
+    }
+  }
+}
+
+//== Specific tabs content layout
+//
 
 #tab-content-modules fieldset p {
-    margin: 3px 0 4px;
+  margin: 3px 0 4px;
 }
 
 #tab-content-members,
 #tab-content-memberships,
 #tab-content-users {
-    .splitcontentleft {
-        width: 65%;
+  .splitcontentleft {
+    width: 65%;
+  }
+
+  .splitcontentright {
+    width: 35%;
+  }
+
+  fieldset {
+    margin-bottom: $line-height-computed;
+
+    legend {
+      font-weight: $font-weight-bold;
     }
 
-    .splitcontentright {
-        width: 35%;
+    label {
+      @include check;
+      display: block;
+      margin-bottom: 3px;
     }
 
-    fieldset {
-        margin-bottom: $line-height-computed;
-
-        legend {
-            font-weight: bold;
-        }
-
-        label {
-            display: block;
-            margin-bottom: 3px;
-            @include checkbox;
-        }
-
-        label[for=principal_search] {
-            padding-left: 0;
-        }
+    label[for="principal_search"] {
+      padding-left: 0;
     }
+  }
 
-    .pagination .items {
-        margin-left: 0;
-    }
+  .pagination .items {
+    margin-left: 0;
+  }
 }
 
 #tab-content-members,
 #tab-content-users {
-    #principals {
-        max-height: 400px;
-        overflow: auto;
-    }
+  #principals {
+    max-height: 400px;
+    overflow: auto;
+  }
 }
 
 #tab-content-memberships .splitcontentright select {
-    width: 100%;
+  width: 100%;
+}
+
+#principals_for_new_member {
+  .pagination {
+    float: none;
+  }
 }

src/sass/components/_top.scss

@@ -3,46 +3,109 @@
 // --------------------------------------------------
 
 #top-menu {
-    padding: $padding-small-vertical $padding-side;
-    background: $top-menu-bg;
-    color: $top-menu-text;
-    font-size: $font-size-small;
-    @extend %clearfix;
+  $top-menu-padding-vertical:   $padding-small-vertical + 1px;
+  $top-menu-padding-horizontal: $padding-side;
+  @extend %clearfix;
+  box-sizing: border-box;
+  padding: $top-menu-padding-vertical $top-menu-padding-horizontal;
+  background: $top-menu-bg;
+  color: $top-menu-text;
+  font-size: $font-size-small;
 
-    ul {
-        margin: 0;
-        padding: 0;
-    }
+  @if $top-menu-collapse {
+    $toggler-position-v:    $top-menu-padding-vertical + 1px;
+    $toggler-position-h:    1px;
 
-    li {
-        display: inline;
-        margin: 0 .5em 0 0;
-        padding: 0;
-        list-style-type: none;
+    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;
+
+    &.expanded {
+      max-height: none;
     }
 
     a {
-        color: $top-menu-link;
-        font-weight: bold;
+      display: inline-block;
+      margin-bottom: $top-menu-padding-vertical;
+      white-space: nowrap;
+    }
 
-        &:hover {
-            color: $top-menu-link-hover;
-            text-decoration: none;
+    .top-menu-toggler {
+      @extend %fa-icon;
+      display: block;
+      position: absolute;
+      top: $toggler-position-v;
+      @if $sidebar-position == "left" {
+        left: $toggler-position-h;
+      } @else {
+        right: $toggler-position-h;
+      }
+      color: mix($top-menu-link, $top-menu-bg, 33%);
+      font-size: $fa-font-size-base;
+      line-height: 1;
+      user-select: none;
+
+      &::before {
+        content: $fa-var-caret-square-o-down;
+        margin-right: 0;
+      }
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: mix($top-menu-link-hover, $top-menu-bg, 50%);
+      }
+
+      &.expanded {
+        &::before {
+          content: $fa-var-caret-square-o-up;
         }
-    }
+      }
 
-    #loggedas {
-        float: right;
+      @media screen and (min-width: $top-menu-collapse-breakpoint) {
+        display: none;
+      }
     }
+  }
+
+  ul {
+    @include clearfix;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    margin: 0 .8em 0 0;
+    padding: 0;
+    float: left;
+    list-style-type: none;
+    white-space: nowrap;
+  }
+
+  a {
+    color: $top-menu-link;
+    font-weight: $font-weight-bold;
+
+    &:hover {
+      color: $top-menu-link-hover;
+      text-decoration: none;
+    }
+  }
+
+  #loggedas {
+    margin-left: 1em;
+    float: right;
+  }
 }
 
 #account {
-    float: right;
+  float: right;
 
-    > ul > li {
-        margin-right: 0;
-        margin-left: .5em;
-    }
+  > ul > li {
+    margin-right: 0;
+    margin-left: .8em;
+  }
 }
 
 
@@ -51,126 +114,326 @@
 // --------------------------------------------------
 
 #header {
-    position: relative;
-    background-color: $header-bg;
-    color: $header-text;
+  @extend %clearfix;
+  position: relative;
+  background-color: $header-bg;
+  color: $header-text;
 
-    > h1 {
-        padding: 10px $padding-side;
+  > h1 {
+    padding: $header-padding-vertical $header-padding-horizontal;
 
-        > .root {
-            color: $header-root;
-            font-weight: 500;
-        }
+    @if $use-logo {
+      padding-left: $logo-image-width + $logo-position-horizontal + $logo-space;
+      background-image: url("../images/logo/logo.png");
+      background-repeat: no-repeat;
+      background-position: $logo-position-horizontal $logo-position-vertical;
 
-        > .ancestor {
-            font-weight: 500;
-        }
+      @if $use-retina-logo {
+        @include img-retina("../images/logo/logo@2x.png", $logo-image-width, $logo-image-height);
+      }
     }
 
-    a {
-        color: $header-link;
+    .root {
+      color: $header-root;
+      font-weight: $font-weight-semi-bold;
     }
+
+    .ancestor {
+      font-weight: $font-weight-semi-bold;
+    }
+
+    .root,
+    .ancestor {
+      display: inline-block;
+    }
+
+    .current-project {
+      display: inline-block;
+    }
+  }
+
+  a {
+    color: $header-link;
+  }
 }
 
 #quick-search {
-    margin-top: ($header-title-line-height + $padding-large-vertical * 2 - $input-height-base - 1px) / 2;
-    margin-right: $padding-side;
+  #header & {
+    margin-top: floor(($header-title-line-height + $header-padding-vertical * 2 - $input-height-base) * .5) - 1px;
+    margin-right: $header-padding-horizontal;
     float: right;
     color: $header-text;
+  }
 
-    label {
-        font-weight: 500;
-    }
+  > * {
+    vertical-align: top;
+  }
 
-    form {
-        display: inline;
-    }
-
-    input,
-    select {
-        margin-left: 5px;
-        border-color: darken($header-bg, 15%);
-        background: darken($header-bg, 10%);
-        color: $header-root;
-        @include transition(color ease-in-out .1s, background-color ease-in-out .1s, border-color ease-in-out .1s);
-
-        &:focus {
-            border-color: darken($header-bg, 35%);
-            background-color: $input-bg;
-            color: $input-color;
-            box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);
-        }
-    }
-
-    option {
-        background-color: $input-bg;
-        color: $input-color;
-
-        &[disabled] {
-            color: $gray-lighter;
-        }
-    }
+  form {
+    display: inline-block;
 
     input {
-        width: 200px;
+      width: $quick-search-width;
     }
+  }
+
+  > form > input,
+  > select {
+    border-color: $quick-search-border;
+
+    &:focus {
+      border-color: $quick-search-border-focus;
+    }
+  }
+
+  option {
+    background-color: $input-bg;
+    color: $input-color;
+
+    &[disabled] {
+      color: $gray-400;
+    }
+  }
+}
+
+#project-jump {
+  display: inline-block;
+
+  &.expanded {
+    .drdn-trigger {
+      z-index: 1003;
+      height: auto;
+      padding-bottom: $header-padding-horizontal * .5;
+      border-color: $quick-search-dropdown-bg;
+      background-color: $quick-search-dropdown-bg;
+
+      &::after {
+        content: $fa-var-caret-up;
+      }
+    }
+  }
+
+  .drdn {
+    &-trigger {
+      @extend %form-field;
+      @extend %fa-icon-after;
+      min-width: $quick-search-width;
+      border-color: $quick-search-border;
+
+      &::after {
+        content: $fa-var-caret-down;
+        position: absolute;
+        top: ($font-size-base * .5);
+        right: $input-padding-horizontal;
+      }
+    }
+
+    &-content {
+      min-width: $quick-search-box-width;
+      background: $quick-search-dropdown-bg;
+
+      > .quick-search {
+        padding: $header-padding-horizontal * .5;
+
+        > input {
+          width: 100%;
+        }
+      }
+    }
+
+    &-items {
+      border-top: 1px solid $quick-search-dropdown-border;
+
+      > a,
+      > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  a {
+    color: $main-menu-link;
+
+    &:hover,
+    &:focus {
+      background-color: $component-active-bg;
+      color: $component-active-color;
+      text-decoration: none;
+    }
+  }
+
+  .all-projects a {
+    font-weight: $font-weight-bold;
+  }
 }
 
 #main-menu {
-    border-bottom: 1px solid $main-menu-border;
-    background-color: $main-menu-bg;
+  $tabs-height: $main-menu-padding-vertical * 2 + $line-height-computed;
 
-    @media screen and (max-width: $screen-sm-max) {
-        font-size: $font-size-small-px;
-    }
+  clear: both;
+  background-color: $main-menu-bg;
+  box-shadow: inset 0 -1px $main-menu-border;
+  color: $text-color;
 
-    ul {
-        margin: 0;
-        padding: 0 ($padding-side - $main-menu-padding-horizontal);
-        color: $main-menu-link;
-        list-style: none;
-        @extend %clearfix;
+  &.tabs {
+    margin-bottom: 0;
+    overflow: inherit;
 
-        > li {
-            margin-right: .5em;
-            margin-bottom: -1px;
-            float: left;
+    > ul {
+      height: $tabs-height;
 
-            > a {
-                display: block;
-                padding: $main-menu-padding-vertical 0;
-                @include transition(box-shadow .2s);
-
-                @media screen and (min-width: $screen-md-min) {
-                    padding-right: $main-menu-padding-horizontal;
-                    padding-left: $main-menu-padding-horizontal;
-                }
-
-                @media screen and (min-width: $screen-lg-min) {
-                    padding-right: $main-menu-padding-horizontal * 2;
-                    padding-left: $main-menu-padding-horizontal * 2;
-                }
-
-                &:hover,
-                &:focus {
-                    outline: 0 none;
-                    text-decoration: none;
-                    box-shadow: inset 0 (-$main-menu-shadow-width) 0 $main-menu-shadow-hover;
-                }
-
-                &.selected {
-                    padding-bottom: $main-menu-padding-vertical - $main-menu-shadow-width;
-                    border-bottom: 3px solid $main-menu-shadow-active;
-                    color: $main-menu-link-active;
-                    font-weight: bold;
-                    box-shadow: none;
-                }
-            }
+      > li {
+        > a {
+          height: $tabs-height;
+          margin: 0;
+          border: 0 none;
+          border-radius: 0;
+          background: transparent;
         }
+      }
+    }
+  }
+
+  > ul {
+    @extend %clearfix;
+    margin: 0;
+    padding: 0 ($padding-side - $main-menu-padding-horizontal);
+    list-style: none;
+    color: $main-menu-link;
+
+    > li {
+      position: relative;
+      float: left;
+
+      &:hover {
+        > .new-object {
+          z-index: 100;
+          border-bottom: 1px solid $main-menu-dropdown-bg;
+        }
+
+        > .menu-children {
+          visibility: visible;
+        }
+      }
+
+      > a {
+        display: block;
+        padding: $main-menu-padding-vertical $main-menu-padding-horizontal;
+        transition: box-shadow $transition-time-long;
+        color: $main-menu-link;
+        line-height: $line-height-computed;
+        white-space: nowrap;
+
+        @media screen and (min-width: $screen-lg-min) {
+          padding-right: $main-menu-padding-horizontal * 2;
+          padding-left: $main-menu-padding-horizontal * 2;
+        }
+
+        &:hover,
+        &:focus {
+          background-color: $main-menu-bg-hover;
+          box-shadow: inset 0 (-$main-menu-shadow-width) 0 $main-menu-shadow-hover;
+          text-decoration: none;
+        }
+
+        &.selected {
+          padding-bottom: $main-menu-padding-vertical - $main-menu-shadow-width;
+          border-bottom: 3px solid $main-menu-shadow-active;
+          background-color: $main-menu-bg-active;
+          box-shadow: none;
+          color: $main-menu-link-active;
+          font-weight: $font-weight-semi-bold;
+        }
+
+        &.new-object {
+          position: relative;
+          width: $tabs-height;
+          margin-right: $main-menu-padding-horizontal;
+          padding-bottom: $main-menu-padding-vertical - 1px;
+          border: 1px solid $main-menu-border;
+          border-width: 0 1px;
+          background-color: $main-menu-dropdown-bg;
+          font-size: 0;
+
+          &::before {
+            @include fa-icon;
+            content: $fa-var-plus;
+            font-size: $fa-font-size-base;
+            line-height: $line-height-computed;
+            text-align: center;
+          }
+
+          &:hover,
+          &:focus {
+            box-shadow: none;
+          }
+        }
+      }
+    }
+  }
+
+  a {
+    color: $main-menu-link;
+  }
+
+  .menu-children {
+    @include nice-shadow(2);
+    display: block;
+    visibility: hidden;
+    position: absolute;
+    z-index: 1001;
+    min-width: 130px;
+    margin: 0 1px;
+    padding: 0;
+    overflow: hidden;
+    list-style: none;
+    transition: visibility 0ms 50ms;
+    border-radius: 0 0 $border-radius-base $border-radius-base;
+    background: $main-menu-dropdown-bg;
+
+    &.visible {
+      visibility: visible;
     }
 
     a {
-        color: $main-menu-link;
+      display: block;
+      padding: $tab-padding-vertical ($tab-padding-horizontal * 2);
+      border-top: 1px solid $main-menu-border;
+      color: $main-menu-link;
+
+      &:hover,
+      &:focus {
+        background-color: $component-active-bg;
+        color: $component-active-color;
+        text-decoration: none;
+      }
     }
+
+    > li:first-child > a {
+      border: 0 none;
+    }
+  }
+
+  .tabs-buttons {
+    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 - 1px;
+      background-color: $main-menu-bg;
+
+      &:hover {
+        background-color: $main-menu-bg-hover;
+      }
+    }
+  }
+
+  ul + .tabs-buttons {
+    display: block !important; // stylelint-disable-line declaration-no-important
+  }
 }

src/sass/components/_wiki.scss

@@ -1,226 +1,313 @@
 .wiki.wiki-page {
-    margin-bottom: $line-height-computed;
-    font-size: $wiki-font-size;
+  margin-bottom: $line-height-computed;
+  font-size: $wiki-font-size;
+
+  @if $wiki-page-more-vertical-space {
+    // Add some space between list items
+    ul,
+    ol {
+      li {
+        margin-top: .25em;
+      }
+
+      ul,
+      ol {
+        margin-top: .25em;
+        margin-bottom: .25em;
+
+        li {
+          margin-top: .125em;
+        }
+      }
+    }
+  }
 }
 
-.controller-wiki .wiki > .preview {
+.controller-wiki {
+  .wiki > .preview,
+  .wiki.wiki-preview {
     font-size: $wiki-font-size;
+  }
 }
 
 div.wiki {
-    color: $wiki-text;
-    line-height: $wiki-line-height;
+  color: $wiki-text;
+  line-height: $wiki-line-height;
 
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        margin-top: 1em;
-        margin-bottom: $wiki-font-size;
-        font-weight: $headings-font-weight;
-        line-height: $headings-line-height;
+  // stylelint-disable selector-list-comma-newline-after
+  h1, .h1,
+  h2, .h2,
+  h3, .h3,
+  h4, .h4,
+  h5, .h5,
+  h6, .h6 {
+    margin-top: 1em;
+    margin-bottom: $wiki-font-size;
+    font-weight: $headings-font-weight;
+    line-height: $headings-line-height;
+  }
+
+  h1, .h1 {
+    padding-bottom: .3em;
+    border-bottom: 1px solid $gray-400;
+    font-size: $font-size-h1;
+    line-height: 1.2;
+  }
+
+  h2, .h2 {
+    padding-bottom: .3em;
+    border-bottom: 1px solid $gray-400;
+    font-size: $font-size-h2;
+    line-height: 1.225;
+  }
+
+  h3, .h3 {
+    font-size: $font-size-h3;
+    line-height: 1.43;
+  }
+
+  h4, .h4 {
+    font-size: $font-size-h4;
+  }
+
+  h5, .h5 {
+    font-size: $font-size-h5;
+  }
+
+  h6, .h6 {
+    color: $gray-700;
+    font-size: $font-size-h6;
+  }
+
+  .text-normal {
+    font-weight: $font-weight-normal;
+  }
+
+  > a:first-child {
+    + h1,
+    + h2,
+    + h3,
+    + h4,
+    + h5,
+    + h6 {
+      margin-top: 0;
+    }
+  }
+
+  > a:target {
+    + h2,
+    + h3,
+    + h4,
+    + h5,
+    + h6 {
+      &::before {
+        content: "#";
+        display: inline-block;
+        width: .7em;
+        margin-left: -.7em;
+        color: $headings-anchor-color-active;
+        font-weight: $font-weight-normal;
+      }
+    }
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  blockquote {
+    margin-bottom: 1em;
+
+    > :first-child {
+      margin-top: 0;
     }
 
-    h1 { font-size: $font-size-h1; line-height: 1.2; }
-    h2 { font-size: $font-size-h2; line-height: 1.225; }
-    h3 { font-size: $font-size-h3; line-height: 1.43; }
-    h4 { font-size: $font-size-h4; }
-    h5 { font-size: $font-size-h5; }
-    h6 { font-size: $font-size-h6; }
-
-    h1,
-    h2 {
-        padding-bottom: .3em;
-        border-bottom: 1px solid $gray-lighter;
+    > :last-child {
+      margin-bottom: 0;
     }
+  }
 
-    h6 {
-        color: $gray;
+  .contextual {
+    a {
+      opacity: $icon-opacity;
+
+      &:hover {
+        opacity: $icon-hover-opacity;
+      }
     }
+  }
 
-    > a:first-child {
-        + h1,
-        + h2,
-        + h3,
-        + h4,
-        + h5,
-        + h6 {
-            margin-top: 0;
-        }
-    }
+  a {
+    word-break: break-all;
+    word-break: break-word;
+  }
 
-    > *:last-child {
-        margin-bottom: 0;
-    }
+  p,
+  ul,
+  ol {
+    margin-bottom: 1em;
+  }
 
-    .contextual {
-        a {
-            opacity: .4;
-
-            &:hover {
-                opacity: 1;
-            }
-        }
-    }
-
-    p,
-    ul,
-    ol {
-        margin-bottom: 1em;
-    }
+  ul,
+  ol {
+    padding-left: 1.5em;
 
     ul,
     ol {
-        padding-left: 1.5em;
-
-        ul,
-        ol {
-            margin-bottom: 0;
-        }
+      margin-bottom: 0;
     }
+  }
 
-    li > p {
-        margin-top: ($line-height-computed / 2);
-    }
+  li > p {
+    margin-top: .25em;
+    margin-bottom: 0;
+  }
 
-    table {
-        // scss-lint:disable DuplicateProperty
-        display: block;
-        width: 100%;
-        margin-bottom: $line-height-computed;
-        overflow: auto;
-        word-break: normal;
-        word-break: keep-all;
-    }
+  table {
+    display: block;
+    width: 100%;
+    margin-bottom: $line-height-computed;
+    overflow: auto;
+    word-break: normal;
+    word-break: keep-all;
+  }
 
-    tr:nth-child(2n) {
-        background-color: $table-bg-accent;
-    }
+  // Textile
+  tbody:first-child tr:nth-child(2n),
+  // Markdown
+  thead + tbody tr:nth-child(2n-1) {
+    background-color: $table-bg-accent;
+  }
+
+  td,
+  th {
+    padding: $table-cell-padding;
+    border: 1px solid $table-border-color;
+  }
+
+  .noborder,
+  .wiki-class-noborder {
+    border: 0 none;
 
     td,
     th {
-        padding: $table-cell-padding;
-        border: 1px solid $table-border-color;
+      border: 0 none;
     }
+  }
 
-    .noborder {
-        border: 0 none;
+  a.new {
+    color: $brand-danger;
+  }
 
-        td,
-        th {
-            border: 0 none;
-        }
-    }
+  code {
+    padding: .2em .33em;
+    border-radius: $border-radius-base;
+    background-color: rgba($gray-500, .3);
+    font-size: $font-size-small;
+  }
 
-    a.new {
-        color: $brand-danger;
-    }
+  pre {
+    width: auto;
+    margin-bottom: 1.15em;
+    padding: 12px 15px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    border-radius: $border-radius-base;
+    background-color: rgba($gray-500, .15);
+    font-size: $font-size-small;
 
     code {
-        // scss-lint:disable DuplicateProperty
-        padding: .2em .33em;
-        border-radius: $border-radius-base;
-        background-color: #f5f5f5; // IE8 fallback
-        background-color: rgba(#000, .04);
-        font-size: $font-size-small;
+      padding: 0;
+      border-radius: 0;
+      background-color: transparent;
+      font-size: 1em;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    vertical-align: middle;
+  }
+
+  .toc {
+    display: table;
+    max-width: 45%;
+    margin-bottom: $line-height-computed;
+    margin-left: 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;
+
+    a {
+      color: $toc-link;
+      font-weight: $font-weight-normal;
+      text-decoration: none;
+
+      &:hover {
+        color: $toc-link-hover;
+        text-decoration: underline;
+      }
     }
 
-    pre {
-        // scss-lint:disable DuplicateProperty
-        width: auto;
-        padding: 4px 8px;
-        border: 1px solid #e7e7e7;
-        border-radius: $border-radius-base;
-        border-color: rgba(#000, .068);
-        background-color: #f7f7f7; // IE8 fallback
-        background-color: rgba(#000, .03);
-        overflow-x: auto;
-        overflow-y: hidden;
-        font-size: $font-size-small;
-
-        code {
-            padding: 0;
-            border-radius: 0;
-            background-color: transparent;
-            font-size: 1em;
-        }
+    &.right {
+      margin-right: 0;
+      margin-left: $line-height-computed;
+      float: right;
     }
 
-    .toc {
-        margin-bottom: $line-height-computed;
-        margin-left: 0;
-        padding: 0;
-        list-style-type: none;
+    &.left {
+      margin-right: $line-height-computed;
+      margin-left: 0;
+      float: left;
+    }
 
-        &.right,
-        &.left {
-            max-width: 45%;
-            padding: 8px;
-            border: 1px solid $highlight-border;
-            border-radius: $border-radius-base;
-            background-color: $highlight-bg;
-            font-size: $font-size-small;
-            box-shadow: $panel-shadow;
+    ul {
+      margin: 0;
+      padding: 0;
+      font-size: $font-size-small;
 
-            a {
-                color: $highlight-text;
-                font-weight: normal;
-                text-decoration: none;
+      ul {
+        font-size: 1em;
+      }
+    }
 
-                &:hover {
-                    color: darken($highlight-text, 10%);
-                    text-decoration: underline;
-                }
-            }
-        }
+    li {
+      // stylelint-disable selector-max-compound-selectors
+      margin: 0;
 
-        &.right {
-            margin-right: 0;
-            margin-left: $line-height-computed;
-            float: right;
-        }
-
-        &.left {
-            margin-right: $line-height-computed;
-            margin-left: 0;
-            float: left;
-        }
-
-        ul {
-            margin: 0;
-            padding: 0;
-            font-size: $font-size-small;
-
-            ul {
-                font-size: 1em;
-            }
-        }
+      li {
+        margin-left: 1.5em;
+        list-style-type: disc;
 
         li {
-            // scss-lint:disable SelectorDepth
-            margin: 0;
+          list-style-type: circle;
 
-            li {
-                list-style-type: disc;
-                margin-left: 1.5em;
-
-                li {
-                    list-style-type: circle;
-
-                    li {
-                        list-style-type: square;
-                    }
-                }
-            }
-        }
-
-        img {
-            max-width: 100%;
-            vertical-align: middle;
+          li {
+            list-style-type: square;
+          }
         }
+      }
     }
+  }
+
+  .toc-active-prev + .toc {
+    padding-left: $padding-large-horizontal;
+    border-left: 4px solid $toc-active-border;
+
+    a {
+      color: $toc-active-link;
+
+      &:focus,
+      &:hover {
+        color: $toc-active-link-hover;
+      }
+    }
+  }
 }
 
 h1,
@@ -229,68 +316,183 @@ h3,
 h4,
 h5,
 h6 {
-    .wiki-anchor {
-        display: none;
-        position: relative;
-        top: -(1em - $font-size-small);
-        margin-left: 5px;
-        color: $gray-lighter !important;
-        font-size: $font-size-small;
-        text-decoration: none !important;
-    }
+  .wiki-anchor {
+    display: none;
+    margin-left: 5px;
+    color: $headings-anchor-color !important; // stylelint-disable-line declaration-no-important
+    text-decoration: none !important; // stylelint-disable-line declaration-no-important
+  }
 
-    &:hover {
-        .wiki-anchor {
-            display: inline;
-        }
+  &:hover {
+    .wiki-anchor {
+      display: inline;
     }
+  }
+
+  img {
+    display: inline-block;
+    max-width: 100%;
+    vertical-align: middle;
+  }
 }
 
 p.footnote {
-    margin-bottom: 5px;
+  margin-bottom: 5px;
 
-    &:before {
-        display: block;
-        width: 300px;
-        margin-top:  $line-height-computed;
-        padding-top: $line-height-computed / 2;
-        border-top: 1px solid $gray-lighter;
-        content: "";
-    }
+  &::before {
+    content: "";
+    display: block;
+    width: 300px;
+    margin-top: $line-height-computed;
+    padding-top: $line-height-computed * .5;
+    border-top: 1px solid $gray-400;
+  }
 
-    + p.footnote:before {
-        display: none;
-    }
+  + p.footnote::before {
+    display: none;
+  }
+}
+
+.ltr,
+.wiki-class-ltr {
+  direction: ltr;
+}
+
+.rtl,
+.wiki-class-rtl {
+  direction: rtl;
 }
 
 .preview {
-    margin-top: $line-height-computed;
-    padding: $padding-wiki;
-    background-color: #fffbe5;
-    background-image: url("../images/draft.png");
-    background-position: center center;
-
-    html[lang="pl"] & {
-        background-image: url("../images/draft-pl.png");
-    }
+  margin-top: $line-height-computed;
+  padding: $padding-wiki;
+  border: 1px solid $gray-400;
+  background-color: $body-bg;
 }
 
 #wiki_add_attachment {
+  padding-top: $line-height-computed;
+  border-top: 1px solid $gray-400;
+
+  > p {
+    margin-bottom: 0;
+    float: left;
+  }
+
+  > form {
     padding-top: $line-height-computed;
-    border-top: 1px solid $gray-lighter;
+    clear: left;
+  }
 
-    > p {
-        float: left;
-    }
+  .collapsible & {
+    padding-top: 0;
+    border-top: 0;
 
-    #add_attachment_form {
-        clear: left;
+    > form {
+      padding-top: 0;
     }
+  }
 }
 
-.controller-wiki.action-show {
-    .other-formats {
-        margin-top: 0;
-        float: right;
+
+//
+// Custom classes for Bootstrap-like features
+// --------------------------------------------------
+
+
+// Pager
+// see: http://getbootstrap.com/components/#pagination-pager
+
+.wiki-pager {
+  > a {
+    display: inline-block;
+    padding: $padding-base-vertical $padding-base-horizontal;
+    border: 1px solid $btn-default-border;
+    border-radius: ceil($font-size-base + ($padding-base-vertical + 1px) * 2) * .5;
+    background-color: $body-bg;
+    line-height: 1;
+    white-space: nowrap;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: $btn-default-bg;
+      text-decoration: none;
     }
+  }
+
+  &.wiki-pager--aligned {
+    overflow: hidden;
+
+    > a:first-child {
+      float: left;
+    }
+
+    > a:last-child {
+      float: right;
+    }
+  }
+}
+
+
+//== Typographic helper classes
+//
+
+// Lead body copy
+// see: http://getbootstrap.com/css/#lead-body-copy
+
+.lead {
+  margin-bottom: $line-height-computed;
+  font-size: floor(($font-size-base * 1.15));
+  font-weight: 300;
+  line-height: 1.4;
+
+  @media (min-width: $screen-sm-min) {
+    font-size: ($font-size-base * 1.5);
+  }
+}
+
+
+// Alignment
+// see: http://getbootstrap.com/css/#type-alignment
+
+.text-left       { text-align: left; }
+.text-right      { text-align: right; }
+.text-center     { text-align: center; }
+.text-justify    { text-align: justify; }
+.text-nowrap     { white-space: nowrap; }
+
+
+// Transformation
+// see: http://getbootstrap.com/css/#type-transformation
+
+.text-lowercase  { text-transform: lowercase; }
+.text-uppercase  { text-transform: uppercase; }
+.text-capitalize { text-transform: capitalize; }
+
+
+// Other helper classes
+// see: http://getbootstrap.com/css/#helper-classes
+
+.text-muted      { color: $gray-600; }
+.text-primary    { color: $brand-primary; }
+.text-success    { color: $brand-success; }
+.text-info       { color: $brand-info; }
+.text-warning    { color: $brand-warning; }
+.text-danger     { color: $brand-danger; }
+
+.bg-primary      { background-color: $brand-primary; color: $brand-text; }
+.bg-success      { background-color: $state-success; }
+.bg-info         { background-color: $state-info; }
+.bg-warning      { background-color: $state-warning; }
+.bg-danger       { background-color: $state-danger; }
+
+p {
+  &.bg-primary,
+  &.bg-success,
+  &.bg-info,
+  &.bg-warning,
+  &.bg-danger {
+    padding: $panel-body-padding;
+  }
 }

src/sass/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,121 +1,93 @@
 @if $enable-sidebar-toggler {
-    $toggler-position-v:        1px;
-    $toggler-position-h:        1px;
-    $arrow-right:               "../images/bullet_arrow_right.png";
-    $arrow-left:                "../images/bullet_arrow_left.png";
+  #main {
+    position: relative;
 
-    @if $use-font-awesome {
-        $arrow-right:           $fa-var-caret-square-o-right;
-        $arrow-left:            $fa-var-caret-square-o-left;
+    // Fix full screen view for dashboard plugin
+    // https://github.com/jgraichen/redmine_dashboard
+    @at-root .controller-rdb_taskboard & {
+      position: static;
+    }
+  }
+
+  #sidebar {
+    @if $fixed-layout {
+      will-change: margin, opacity;
+      transition: margin .5s, opacity .5s;
+      opacity: 1;
+    } @else {
+      will-change: margin;
+      transition: margin .5s;
     }
 
-    #main {
-        position: relative;
+    &.sidebar-hiding {
+      @if $fixed-layout {
+        opacity: 0;
+      }
+      @if $sidebar-position == "left" {
+        margin-left: -$sidebar-width;
+      } @else {
+        margin-right: -$sidebar-width;
+      }
     }
 
-    #sidebar {
-        @if $fixed-layout {
-            opacity: 1;
-            @include transition(margin .5s, opacity .5s);
-        } @else {
-            @include transition(margin .5s);
-        }
+    &.sidebar-hidden {
+      display: none;
+    }
+  }
 
-        &.sidebar-hiding {
-            @if $fixed-layout {
-                opacity: 0;
-            }
-            @if $sidebar-position == "left" {
-                margin-left: -$sidebar-width;
-            } @else {
-                margin-right: -$sidebar-width;
-            }
-        }
+  .sidebar-toggler {
+    display: block;
+    position: absolute;
+    top: 1px;
+    width: 14px;
+    height: 16px;
+    border: 2px solid $gray-700;
+    border-radius: $border-radius-base;
+    background-color: $gray-200;
+    background-position: center;
+    line-height: 1;
+    user-select: none;
 
-        &.sidebar-hidden {
-            display: none;
-        }
+    @media print {
+      display: none;
     }
 
-    .sidebar-toggler {
-        @include user-select(none);
-
-        display: block;
-        position: absolute;
-        top: $toggler-position-v;
-
-        @if $use-font-awesome {
-            @extend %fa-icon;
-            color: $gray-light;
-            line-height: 1;
-
-            &:before {
-                margin-right: 0;
-            }
-
-            &:hover,
-            &:focus,
-            &:active {
-                color: $gray;
-            }
-        } @else {
-            width: 15px;
-            height: 15px;
-            border-radius: $border-radius-base;
-            background-repeat: no-repeat;
-            background-position: center center;
-
-            &:hover,
-            &:focus,
-            &:active {
-                background-color: $gray-lighter;
-            }
-        }
-
-        @if $sidebar-position == "left" {
-            left: $toggler-position-h;
-
-            @if $use-font-awesome {
-                &:before {
-                    content: $arrow-left;
-                }
-            } @else {
-                background-image: url($arrow-left);
-            }
-        } @else {
-            right: $toggler-position-h;
-
-            @if $use-font-awesome {
-                &:before {
-                    content: $arrow-right;
-                }
-            } @else {
-                background-image: url($arrow-right);
-            }
-        }
-
-        &.sidebar-hidden {
-            @if $sidebar-position == "left" {
-                @if $use-font-awesome {
-                    &:before {
-                        content: $arrow-right;
-                    }
-                } @else {
-                    background-image: url($arrow-right);
-                }
-            } @else {
-                @if $use-font-awesome {
-                    &:before {
-                        content: $arrow-left;
-                    }
-                } @else {
-                    background-image: url($arrow-left);
-                }
-            }
-        }
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: $gray-300;
     }
+
+    @if $sidebar-position == "left" {
+      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: 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 {
+      @if $sidebar-position == "left" {
+        background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-700)));
+      } @else {
+        background-image: inline-svg("chevron-left.svg", (path: (fill: $gray-700)));
+      }
+    }
+  }
 } @else {
-    .sidebar-toggler {
-        display: none;
-    }
+  .sidebar-toggler {
+    display: none;
+  }
 }

src/sass/lib/_font-awesome.scss

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

src/sass/lib/_normalize.scss

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

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

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

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

@@ -2,12 +2,13 @@
  * -------------------------- */
 
 @font-face {
-    font-family: "FontAwesome";
-    src: url("#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}");
-    src: url("#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}") format("embedded-opentype"),
-         url("#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}") format("woff"),
-         url("#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}") format("truetype"),
-         url("#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular") format("svg");
-    font-weight: normal;
-    font-style: normal;
+  font-family: "FontAwesome";
+  src: url("#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}");
+  src: url("#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}") format("embedded-opentype"),
+    url("#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}") format("woff2"),
+    url("#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}") format("woff"),
+    url("#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}") format("truetype"),
+    url("#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular") format("svg");
+  font-weight: normal;
+  font-style: normal;
 }

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

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

src/sass/mixins/_buttons.scss

@@ -1,39 +1,58 @@
 // Button sizes
 @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
-    padding: $padding-vertical $padding-horizontal;
-    font-size: $font-size;
-    line-height: $line-height;
-    border-radius: $border-radius;
+  padding: $padding-vertical $padding-horizontal;
+  border-radius: $border-radius;
+  font-size: $font-size;
+  line-height: $line-height;
 }
 
 @mixin button-variant($color, $bg, $border) {
-    $focus-bg:      darken($bg, 8%);
-    $focus-border:  darken($border, 8%);
-    $active-shadow: inset 0 1px 3px rgba(#000, .3);
+  $correction: 1;
+  @if hue($bg) > 120 and hue($bg) < 160 or lightness($bg) > 90 {
+    $correction: .5;
+  }
+  $normal-shadow: darken($border, 12% * $correction);
+  $focus-bg:      darken($bg, 12% * $correction);
+  $focus-border:  darken($border, 12% * $correction);
+  $focus-shadow:  darken($focus-border, 12% * $correction);
+  $active-bg:     darken($bg, 12% * $correction);
+  $active-border: darken($border, 15% * $correction);
+  $active-shadow: inset 0 3px 4px -2px $active-border;
 
-    color: $color;
+  @if lightness($bg) > 98 {
+    $focus-bg:      darken($bg, 5%);
+    $focus-border:  darken($border, 5%);
+    $normal-shadow: none;
+    $focus-shadow:  none;
+  }
+
+  background-color: $bg;
+  color: $color;
+  @if $normal-shadow == "none" {
     border-color: $border;
-    background-color: $bg;
-    box-shadow: 0 1px 0 $border;
+    box-shadow: none;
+  } @else {
+    border-color: $border $border $normal-shadow;
+    box-shadow: 0 1px 0 $normal-shadow;
+  }
 
-    @if lightness($bg) > 90 {
-        $focus-bg:      darken($bg, 5%);
-        $focus-border:  darken($border, 5%);
-        $active-shadow: inset 0 1px 2px rgba(#000, .1);
+  &:hover,
+  &:focus {
+    background-color: $focus-bg;
+    color: $color;
+    @if $focus-shadow == "none" {
+      border-color: $focus-border;
+      box-shadow: none;
+    } @else {
+      border-color: $focus-border $focus-border $focus-shadow;
+      box-shadow: 0 1px 0 $focus-shadow;
     }
+  }
 
-    &:hover,
-    &:focus {
-        border-color: $focus-border;
-        background-color: $focus-bg;
-        color: $color;
-        box-shadow: 0 1px 0 $focus-border;
-    }
-
-    &:active {
-        border-color: $border;
-        background-color: $bg;
-        @include translate(0, 1px);
-        box-shadow: $active-shadow;
-    }
+  &:active {
+    transform: translate(0, 1px);
+    border-color: $active-border;
+    background-color: $active-bg;
+    box-shadow: $active-shadow;
+  }
 }

src/sass/mixins/_center-block.scss

@@ -1,7 +1,7 @@
 // Center-align a block level element
 
 @mixin center-block() {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
 }

src/sass/mixins/_clearfix.scss

@@ -1,34 +1,15 @@
 // Clearfix
 //
-// For modern browsers
-// 1. The use of `table` rather than `block` is only necessary if using
-//    `:before` to contain the top-margins of child elements.
-// 2. The space content is one way to avoid an Opera bug when the
-//    contenteditable attribute is included anywhere else in the document.
-//    Otherwise it causes space to appear at the top and bottom of elements
-//    that are clearfixed.
-//
-// Source: http://nicolasgallagher.com/micro-clearfix-hack/
+// Source: http://cssmojo.com/the-very-latest-clearfix-reloaded/
 
 @mixin clearfix() {
-    &:before,
-    &:after {
-        display: table; // 1
-        content: " "; // 2
-    }
-
-    &:after {
-        clear: both;
-    }
+  &::after {
+    content: "";
+    display: block;
+    clear: both;
+  }
 }
 
-
-// Lighter (for output CSS) cleafix with placeholder
-
 %clearfix {
-    &:after {
-        display: table;
-        clear: both;
-        content: "";
-    }
+  @include clearfix;
 }

src/sass/mixins/_forms.scss

@@ -1,43 +1,78 @@
 // Form control focus state
 //
 @mixin form-control-focus($color: $input-border-focus) {
-    &:focus {
-        border-color: $color;
-        outline: 0;
-        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba($color, .5);
-    }
+  &:focus {
+    border-color: rgba($input-border-focus, $input-border-focus-alpha);
+    outline: 0;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 0 2px rgba($input-border-focus, $input-shadow-focus-alpha);
+  }
+}
+
+// Placeholder text
+//
+@mixin placeholder($color: $input-color-placeholder) {
+  &::placeholder {
+    opacity: 1; // See https://github.com/twbs/bootstrap/pull/11526
+    color: $color;
+  }
 }
 
 
 // Form control sizing
 //
 @mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
-    #{$parent} {
-        height: $input-height;
-        padding: $padding-vertical $padding-horizontal;
-        border-radius: $border-radius;
-        font-size: $font-size;
-        line-height: $line-height;
-    }
+  #{$parent} {
+    height: $input-height;
+    padding: $padding-vertical $padding-horizontal;
+    border-radius: $border-radius;
+    font-size: $font-size;
+    line-height: $line-height;
+  }
 
-    select#{$parent} {
-        height: $input-height;
-        line-height: $input-height;
-    }
+  select#{$parent} {
+    height: $input-height;
+    line-height: $input-height;
+  }
 
-    textarea#{$parent},
-    select[multiple]#{$parent} {
-        height: auto;
-    }
+  textarea#{$parent},
+  select[multiple]#{$parent} {
+    height: auto;
+  }
 }
 
-@mixin checkbox() {
-    padding-left: 20px;
-    @include user-select(none);
-    @extend %clearfix;
+@mixin check() {
+  @extend %clearfix;
+  position: relative;
+  padding-left: $check-input-gutter;
+  font-weight: $font-weight-normal;
+  line-height: $line-height-base;
+  text-align: left;
 
-    input[type="checkbox"] {
-        margin-left: -20px;
-        float: left;
-    }
+  input[type="checkbox"],
+  input[type="radio"] {
+    position: absolute;
+    width: auto;
+    margin-top: $check-input-margin-vertical;
+    margin-left: -$check-input-gutter;
+  }
+}
+
+@mixin check-inline() {
+  @include check;
+  display: inline-block;
+  margin-right: $check-input-margin-horizontal;
+}
+
+@mixin check-list() {
+  @include check;
+  display: block;
+  width: auto;
+  margin: 0;
+  padding-top: $check-list-offset-top;
+  padding-bottom: $check-list-offset-top;
+  float: none;
+
+  @media screen and (min-width: $screen-sm-min) {
+    padding-bottom: 0;
+  }
 }

src/sass/mixins/_gradients.scss

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

src/sass/mixins/_image.scss

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

src/sass/mixins/_issues.scss

@@ -1,175 +1,67 @@
-// Priority highlight
+// Priority icon
 
-@mixin priority($parent, $background, $color, $link) {
-    @if lightness($background) < 85% {
-        $background: lighten($background, 6%);
-    }
-
-    $border-color: darken(desaturate($background, 30%), 13.5%);
-
-    tr#{$parent} {
-        background: $background;
-
-        @if ".priority-default" == $parent {
-            color: $color;
-        } @else {
-            color: darken($color, 10%);
-        }
-
-        &.odd {
-            background: darken($background, 3%);
-        }
-
-        td {
-            border-color: $border-color;
-        }
-
-        a {
-            color: $link;
-
-            &:hover {
-                color: darken($link, 10%);
-            }
-        }
-    }
-
-    @if $colored-issue {
-        .issue.details#{$parent} {
-            color: $color;
-
-            @if ".priority-default" == $parent {
-                $border-color: $issue-border;
-                background: $issue-bg;
-            } @else {
-                background: $background;
-            }
-
-            &,
-            hr {
-                border-color: $border-color;
-            }
-
-            a {
-                color: $link;
-
-                &:hover {
-                    color: darken($link, 10%);
-                }
-            }
-
-            .next-prev-links {
-                color: mix($color, $gray-light, 25%);
-            }
-
-            > .description > .wiki {
-                border-top-color: $border-color;
-            }
-
-            .wiki {
-                a {
-                    color: $link-color;
-                    text-decoration: none;
-
-                    &:hover,
-                    &:focus {
-                        color: $link-hover-color;
-                        text-decoration: $link-hover-decoration;
-                    }
-
-                    &.new {
-                        color: $brand-danger;
-                    }
-                }
-            }
-
-            > .attachments {
-                border-top-color: lighten($border-color, 5%);
-
-                @if ".priority-default" == $parent {
-                    background-color: lighten($issue-bg, 1.5%);
-                } @else {
-                    background-color: lighten($background, 5%);
-                }
-
-                span.author {
-                    color: mix($color, $gray, 25%);
-                }
-            }
-
-            .list td {
-                border-bottom-color: $border-color;
-            }
-        }
+@mixin priority-icon-base() {
+  &::before {
+    content: "\00a0";
+    display: inline-block;
+    width: $priority-icon-size;
+    margin-right: $priority-icon-space;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: $priority-icon-size;
+  }
+}
+
+@mixin priority-icon($parent, $color, $icon) {
+  table.list tbody tr#{$parent} .priority,
+  .issue.details#{$parent} .attributes td.priority,
+  .issue.details#{$parent} .attribute.priority .value {
+    &::before {
+      background-image: inline-svg($icon, (path: (fill: $color)));
     }
+  }
 }
 
 
 // Tracker highlight
 
 @mixin tracker($parent, $background, $color) {
-    tr#{$parent} .id > a,
-    a#{$parent},
-    .relations > span > a#{$parent},
-    .parent > a#{$parent} {
-        border-radius: $border-radius-small ($border-radius-small * 3) ($border-radius-small * 3) $border-radius-small;
-        background-color: $background;
-        color: $color;
+  tr#{$parent} .id > a,
+  tr#{$parent} .issue_id > a,
+  a#{$parent}.issue,
+  a#{$parent},
+  .relations > span > a#{$parent},
+  .parent > a#{$parent} {
+    background-color: $background;
+    color: $color;
 
-        &:hover {
-            @if hue($background) > 15deg and hue($background) < 40deg {
-                background-color: darken(adjust-hue($background, -8deg), 8%);
-            } @else {
-                background-color: darken($background, 10%);
-            }
-            color: $color;
-            text-decoration: none;
-        }
-
-        &:focus,
-        &:active {
-            text-decoration: none;
-        }
+    &:hover {
+      @if hue($background) > 15deg and hue($background) < 40deg {
+        background-color: darken(adjust-hue($background, -8deg), 8%);
+      } @else {
+        background-color: darken($background, 10%);
+      }
+      color: $color;
     }
+  }
 
-    a#{$parent} {
-        margin-right: 1px;
-        padding: $tracker-inline-padding;
-        font-weight: normal;
+  a#{$parent} {
+    &.closed {
+      color: mix($color, $background, 75%);
 
-        &.closed {
-            position: relative;
-            color: mix($color, $background, 75%);
-            text-decoration: none;
+      &::after {
+        border-top-color: rgba($color, .95);
+      }
 
-            &:after {
-                display: block;
-                position: absolute;
-                top: 50%;
-                right: 5px;
-                left: 5px;
-                border-top: 1px solid rgba($color, .35);
-                content: "";
-            }
-        }
+      &:hover::after {
+        border-top-color: rgba($color, .25);
+      }
     }
+  }
 
-    tr#{$parent} .id > a {
-        display: block;
-        padding: $tracker-list-padding;
-
-        &:before {
-            color: mix($color, $background, 50%);
-            content: "#";
-        }
-    }
-
-    @if $colored-issue {
-        .issue.details a#{$parent},
-        .issue.details .wiki a#{$parent} {
-            &,
-            &:hover {
-                color: $color;
-            }
-        }
+  tr#{$parent} .id > a {
+    &::before {
+      color: mix($color, $background, 50%);
     }
+  }
 }

src/sass/mixins/_link-variant.scss

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

src/sass/mixins/_opacity.scss

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