Release v2.2.0

Resolve tooltip positioning issues

README.md

@@ -56,6 +56,53 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe
 
 ## Changelog
 
+v2.2.0 (2019-04-09):
+
+* Fixed #101, #102: tooltip positioning
+
+v2.1.1 (2019-03-23):
+
+* Fixed sidebar toggler style when fixed layout is enabled
+* Fixed contextual dropdown padding in mobile view
+
+v1.11.0 (2019-03-22):
+
+* Backported fixes from v2:
+  * 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

package-lock.json

@@ -784,12 +784,6 @@
           "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
           "dev": true
         },
-        "esprima": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-          "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-          "dev": true
-        },
         "glob": {
           "version": "7.1.3",
           "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
@@ -805,9 +799,9 @@
           }
         },
         "js-yaml": {
-          "version": "3.12.1",
+          "version": "3.13.0",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.1.tgz",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.0.tgz",
-          "integrity": "sha512-um46hB9wNOKlwkHgiuyEVAybXBjwFUV0Z/RaHJblRd9DXltue9FTYvzCr9ErQrK9Adz5MU4gHWVaNUfdmrC8qA==",
+          "integrity": "sha512-pZZoSxcCYco+DIKBTimr67J6Hy+EYGZDY/HCWC+iAEA9h1ByhMXAIVUXMcMFpOCxQ/xjXmPI2MkDL5HRm5eFrQ==",
           "dev": true,
           "requires": {
             "argparse": "^1.0.7",
@@ -1087,9 +1081,9 @@
       }
     },
     "esprima": {
-      "version": "2.7.3",
+      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE="
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
     },
     "esquery": {
       "version": "1.0.1",
@@ -1403,9 +1397,9 @@
       "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
     },
     "grunt": {
-      "version": "1.0.3",
+      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/grunt/-/grunt-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/grunt/-/grunt-1.0.4.tgz",
-      "integrity": "sha512-/JzmZNPfKorlCrrmxWqQO4JVodO+DVd5XX4DkocL/1WlLlKVLE9+SdEIempOAxDhWPysLle6afvn/hg7Ck2k9g==",
+      "integrity": "sha512-PYsMOrOC+MsdGEkFVwMaMyc6Ob7pKmq+deg1Sjr+vvMWp35sztfwKE7qoN51V+UEtHsyNuMcGdgMLFkBHvMxHQ==",
       "requires": {
         "coffeescript": "~1.10.0",
         "dateformat": "~1.0.12",
@@ -1418,7 +1412,7 @@
         "grunt-legacy-log": "~2.0.0",
         "grunt-legacy-util": "~1.1.1",
         "iconv-lite": "~0.4.13",
-        "js-yaml": "~3.5.2",
+        "js-yaml": "~3.13.0",
         "minimatch": "~3.0.2",
         "mkdirp": "~0.5.1",
         "nopt": "~3.0.6",
@@ -1864,12 +1858,12 @@
       "dev": true
     },
     "js-yaml": {
-      "version": "3.5.5",
+      "version": "3.13.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.5.5.tgz",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.0.tgz",
-      "integrity": "sha1-A3fDgBfKvHMisNH7zSWkkWQfL74=",
+      "integrity": "sha512-pZZoSxcCYco+DIKBTimr67J6Hy+EYGZDY/HCWC+iAEA9h1ByhMXAIVUXMcMFpOCxQ/xjXmPI2MkDL5HRm5eFrQ==",
       "requires": {
-        "argparse": "^1.0.2",
+        "argparse": "^1.0.7",
-        "esprima": "^2.6.0"
+        "esprima": "^4.0.0"
       }
     },
     "jsbn": {
@@ -3171,6 +3165,11 @@
         "whet.extend": "~0.9.9"
       },
       "dependencies": {
+        "esprima": {
+          "version": "2.7.3",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz",
+          "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE="
+        },
         "js-yaml": {
           "version": "3.6.1",
           "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.6.1.tgz",

src/sass/_variables.scss

@@ -7,6 +7,7 @@
 //
 
 $fixed-layout:                  false !default;
+$css-grid-layout:               false !default;
 $flexbox-layout:                true !default;
 $sidebar-position:              left !default;
 $clean-issues:                  true !default;
@@ -589,7 +590,7 @@ $flash-error-link:              $white !default;
 //
 
 $progress-height:               12px !default;
-$progress-bg:                   $gray-300 !default;
+$progress-bg:                   rgba($gray-500, .5) !default;
 $progress-bar-bg:               $brand-primary !default;
 $progress-bar-success-bg:       $brand-success !default;
 $progress-bar-danger-bg:        $brand-danger !default;

src/sass/components/_admin.scss

@@ -2,8 +2,8 @@
 // Admin
 // --------------------------------------------------
 
-#main #admin-menu {
+#admin-menu {
-  ul {
+  ul:nth-child(n) {
     li {
       list-style-type: none;
 
@@ -14,9 +14,8 @@
       }
     }
   }
-}
 
-#main #admin-index > #admin-menu {
+  #admin-index > & {
     ul {
       margin: 0;
       padding: 0;
@@ -32,6 +31,7 @@
       background-position: 0 center;
     }
   }
+}
 
 
 //== Groups

src/sass/components/_base.scss

@@ -106,6 +106,10 @@ table {
   td {
     padding: $table-condensed-cell-padding $table-cell-padding;
   }
+
+  p {
+    margin: 0;
+  }
 }
 
 ul,
@@ -147,11 +151,11 @@ hr {
   margin-bottom: $line-height-computed;
   border: 0;
   border-top: 1px solid $hr-border;
-}
 
-abbr[title] {
+  li & {
-  border-bottom: 1px dotted $abbr-border-color;
+    margin-top:    $line-height-computed / 2;
-  cursor: help;
+    margin-bottom: $line-height-computed / 2;
+  }
 }
 
 blockquote {

src/sass/components/_buttons.scss

@@ -104,6 +104,7 @@ p.buttons,
                 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;

src/sass/components/_content.scss

@@ -1,5 +1,18 @@
 #main {
-  @if $flexbox-layout {
+  @if $css-grid-layout {
+    display: grid;
+    grid-template-rows: auto 1fr;
+
+    @if $sidebar-position == "left" {
+      grid-template-areas:  "sidebar content"
+                            "footer footer";
+      grid-template-columns: auto 1fr;
+    } @else {
+      grid-template-areas:  "content sidebar"
+                            "footer footer";
+      grid-template-columns: 1fr auto;
+    }
+  } @else if $flexbox-layout {
     display: flex;
   } @else {
     @extend %clearfix;
@@ -14,7 +27,9 @@
 #content {
   padding: $padding-side;
 
-  @if $flexbox-layout {
+  @if $css-grid-layout {
+    grid-area: content;
+  } @else if $flexbox-layout {
     $side-space: $sidebar-width + $padding-side * 2;
     flex: 1 1 auto;
     width: calc(100% - #{$side-space});
@@ -28,10 +43,30 @@
 // Sidebar
 // --------------------------------------------------
 
-#main #sidebar {
+#sidebar {
+  #main & {
     padding: $padding-side $sidebar-padding-horizontal;
+  }
 
-  @if $flexbox-layout {
+  #main.nosidebar & {
+    margin: 0;
+    padding: 0;
+    border: 0 none;
+
+    @if $css-grid-layout {
+      width: 0;
+    } @else if $flexbox-layout {
+      flex: 0 0 auto;
+    } @else {
+      width: 0;
+      float: none;
+    }
+  }
+
+  @if $css-grid-layout {
+    grid-area: sidebar;
+    width: $sidebar-width-computed;
+  } @else if $flexbox-layout {
     flex: 0 0 $sidebar-width-computed;
 
     @if $sidebar-position == "left" {
@@ -68,15 +103,16 @@
   }
 
   ul {
+    &:nth-child(n) {
       margin: 0 0 ($line-height-computed / 2);
       padding: 0;
 
       @if $sidebar-position == "left" {
         margin-right: -($sidebar-padding-horizontal);
-    } @else {
+      }
-      margin-left: -($sidebar-padding-horizontal);
     }
 
+    &:not(.watchers) {
       li {
         margin: 0;
         padding: 0;
@@ -91,6 +127,7 @@
             border-left-width: 3px;
             border-radius: $border-radius-large 0 0 $border-radius-large;
           } @else {
+            margin-left: -($sidebar-padding-horizontal);
             border-right-width: 3px;
             border-radius: 0 $border-radius-large $border-radius-large 0;
           }
@@ -112,7 +149,7 @@
               border-left-color: $sidebar-link-active-side;
               box-shadow: -3px 1px 2px rgba(0, 0, 0, .1);
             } @else {
-            margin-left: -1px;
+              margin-left: -($sidebar-padding-horizontal + 1px);
               border-right-color: $sidebar-link-active-side;
               border-left-color: $body-bg;
               box-shadow: 3px 1px 2px rgba(0, 0, 0, .1);
@@ -123,16 +160,16 @@
     }
   }
 
-#main.nosidebar #sidebar {
+  // Special treatment for anchor tags directly under sidebar tag
-  margin: 0;
+  > a {
-  padding: 0;
+    margin: $sidebar-padding-vertical $sidebar-padding-horizontal;
-  border: 0 none;
 
-  @if $flexbox-layout {
+    @if $sidebar-position == "left" {
-    flex: 0 0 auto;
+      margin-left: $sidebar-padding-horizontal + 3px;
     } @else {
-    width: 0;
+      margin-right: $sidebar-padding-horizontal + 3px;
-    float: none;
+      margin-left: 0;
+    }
   }
 }
 
@@ -142,6 +179,10 @@
   border-top: 1px solid $gray-400;
   color: $gray-600;
   font-size: $font-size-small;
+
+  @if $css-grid-layout {
+    grid-area: footer;
+  }
 }
 
 @if $fixed-layout {

src/sass/components/_elements.scss

@@ -201,10 +201,15 @@ a.collapsible.collapsed,
         background: transparent;
       }
 
+      > .icon-only {
+        &::before {
+          line-height: inherit;
+        }
+      }
+
       > .delete {
         float: right;
         opacity: $icon-opacity;
-        vertical-align: middle;
 
         &:hover {
           opacity: $icon-hover-opacity;
@@ -212,10 +217,7 @@ a.collapsible.collapsed,
       }
 
       img.gravatar {
-        position: relative;
-        top: 1px;
         margin-right: .5em;
-        vertical-align: top;
       }
     }
   }
@@ -847,6 +849,8 @@ div.table-list.boards {
 
 .news-article {
   margin-bottom: $line-height-computed;
+  padding-top: $line-height-computed;
+  border-top: 1px solid $panel-border;
 
   header {
     h3 {
@@ -859,9 +863,13 @@ div.table-list.boards {
   }
 }
 
-.author .user {
+.author {
+  color: $gray-700;
+
+  .user {
     font-weight: $font-weight-bold;
   }
+}
 
 
 //== News comments

src/sass/components/_flash.scss

@@ -70,6 +70,12 @@
   padding-left: $padding-large-horizontal;
   text-align: center;
 
+  &.nodata-left {
+    &::before {
+      float: left;
+    }
+  }
+
   &::before {
     margin-left: 0;
     float: none;

src/sass/components/_forms.scss

@@ -651,6 +651,7 @@ fieldset#filters {
     }
 
     &.values {
+      min-width: 130px;
       white-space: nowrap;
 
       select {

src/sass/components/_gantt.scss

@@ -137,17 +137,16 @@
   &:hover {
     z-index: 25;
 
-    .tip {
+    span.tip {
       display: block;
     }
   }
 
-  .tip {
+  span.tip {
     @include nice-shadow(3);
     display: none;
     position: absolute;
-    top: 9px;
+    top: 12px;
-    left: 24px;
     width: 270px;
     padding: $padding-base-vertical;
     border: $tooltip-border-width solid $tooltip-border;
@@ -158,9 +157,9 @@
   }
 
   @if $sidebar-position == "left" {
-    tr > td:last-child & {
+    .list & {
-      .tip {
+      span.tip {
-        right: 2px;
+        right: 0;
         left: auto;
       }
     }

src/sass/components/_gravatar.scss

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

src/sass/components/_icons.scss

@@ -247,13 +247,6 @@ a.icon-del {
 %admin-icon {
   @extend %fa-icon;
 
-  &::before {
-    width: 20px;
-    margin-left: -(5px + 20px);
-    color: $gray-700;
-    text-align: center;
-  }
-
   &:hover::before {
     color: $gray-900;
   }
@@ -273,6 +266,16 @@ a.icon-del {
   li {
     > a {
       padding-left: $sidebar-padding-horizontal + 5px + 20px;
+
+      &::before {
+        display: inline-block;
+        width: 20px;
+        margin: 0;
+        margin-left: -(5px + 20px);
+        padding: 0;
+        color: $gray-700;
+        text-align: center;
+      }
     }
   }
 
@@ -703,6 +706,7 @@ div.wiki {
 .other-formats {
   %other-format {
     @extend %fa-icon;
+    background-image: none;
 
     &::before {
       margin-right: .3em;

src/sass/components/_issue.scss

@@ -23,6 +23,7 @@
         position: relative;
 
         > img.gravatar {
+          top: 0;
           width: $issue-gravatar-size;
           height: $issue-gravatar-size;
           margin-right: 10px;
@@ -42,6 +43,7 @@
       }
 
       > img.gravatar {
+        top: 0;
         width: $issue-gravatar-size;
         height: $issue-gravatar-size;
         margin-right: 10px;
@@ -244,10 +246,16 @@
   }
 
   div.attachments {
-    margin: -$issue-padding;
+    margin: 0;
-    padding: $issue-padding;
+    padding: 0;
     border-top: 0;
   }
+
+  div.description + div.attachments {
+    margin: $issue-padding (-$issue-padding) (-$issue-padding);
+    padding: $issue-padding;
+    border-top: 1px solid $issue-border;
+  }
 }
 
 div.fileover {
@@ -327,6 +335,10 @@ div.thumbnails {
   .issues {
     margin: ($line-height-computed / 2) 0 0;
 
+    tr {
+      background-color: transparent;
+    }
+
     tr:last-child > td {
       border-bottom: 0 none;
     }
@@ -335,26 +347,17 @@ div.thumbnails {
       display: none;
     }
 
-    td.subject {
+    td.done_ratio {
-      padding-left: 0;
+      width: 80px;
     }
 
     td.buttons {
+      width: 3em;
       vertical-align: middle;
     }
   }
 }
 
-#relations {
-  td.checkbox {
-    display: none;
-  }
-
-  td.buttons {
-    padding: 0;
-  }
-}
-
 #new-relation-form {
   text-align: right;
 
@@ -520,6 +523,7 @@ div.thumbnails {
       }
 
       > .gravatar {
+        top: 0;
         margin-top: $line-height-computed - $bubble-gravatar-size;
         margin-left: -($bubble-gravatar-size + $bubble-gravatar-space + $bubble-padding-horizontal + 1px);
         float: left;

src/sass/components/_jstoolbar.scss

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

src/sass/components/_list.scss

@@ -25,6 +25,7 @@ table.list {
     padding: $table-cell-padding;
     border: 2px solid $table-border-color;
     border-width: $table-list-header-border;
+    background-color: $body-bg;
     color: $gray-700;
     vertical-align: bottom;
 
@@ -161,16 +162,15 @@ tr.project {
     color: $gray-600;
   }
 
-  &.idnt .name span {
+  &.idnt td.name {
-    padding-left: 16px;
     background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-600)));
     background-repeat: no-repeat;
-    background-position: -5px 50%;
   }
 
   @for $i from 1 through 9 {
-    &.idnt-#{$i} .name {
+    &.idnt-#{$i} td.name {
-      padding-left: $table-cell-padding + 16px * ($i - 1);
+      padding-left: $table-cell-padding + 16px * $i;
+      background-position: ($table-cell-padding + 16px * ($i - 1) - 3px) 50%;
     }
   }
 }
@@ -195,13 +195,6 @@ tr.issue {
     }
   }
 
-  &.idnt .subject a {
-    padding-left: 10px;
-    background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-600)));
-    background-repeat: no-repeat;
-    background-position: -5px 0;
-  }
-
   .controller-issues.action-index & {
     &.assigned-to-me {
       .assigned_to,
@@ -213,9 +206,15 @@ tr.issue {
     }
   }
 
+  &.idnt td.subject {
+    background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-600)));
+    background-repeat: no-repeat;
+  }
+
   @for $i from 1 through 9 {
-    &.idnt-#{$i} .subject {
+    &.idnt-#{$i} td.subject {
-      padding-left: $table-cell-padding + 16px * ($i - 1);
+      padding-left: $table-cell-padding + 16px * $i;
+      background-position: ($table-cell-padding + 16px * ($i - 1) - 3px) 50%;
     }
   }
 }

src/sass/components/_plugins.scss

@@ -158,6 +158,86 @@
 }
 
 
+//
+// Redmine Agile
+// https://www.redmineup.com/pages/plugins/agile
+// --------------------------------------------------
+
+.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 Tags
+// https://www.redmineup.com/pages/plugins/tags
+// --------------------------------------------------
+
+.select2 {
+  .filter .values & {
+    min-width: 180px;
+    margin: 0;
+  }
+
+  &.select2-container.select2-container--default {
+    .select2-selection--multiple {
+      line-height: $line-height-base;
+
+      .select2-selection__rendered {
+        padding: 0 3px 3px;
+      }
+
+      .select2-selection__choice {
+        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);
+    }
+
+    &.select2-container--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);
+      }
+    }
+  }
+}
+
+
 //
 // Redmine Checklists
 // https://www.redmineup.com/pages/plugins/checklists
@@ -178,6 +258,65 @@
 }
 
 
+//
+// 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 / 2;
+      min-width: $quick-search-width / 2;
+    }
+
+    a {
+      line-height: inherit;
+    }
+  }
+}
+
 
 //
 // Redmine CRM People

src/sass/components/_responsive.scss

@@ -233,7 +233,7 @@
       border: 0;
 
       .drdn-trigger {
-        padding: ($btn-padding-vertical * 2) $btn-padding-horizontal;
+        padding: $btn-padding-vertical $btn-padding-horizontal;
       }
 
       .drdn-items {

src/sass/components/_simple-list.scss

@@ -64,6 +64,7 @@
 
     @if $use-gravatars {
       .gravatar {
+        top: 0;
         margin-top: -2px;
         margin-right: $activity-avatar-space;
         float: left;

src/sass/components/_tabs.scss

@@ -56,19 +56,19 @@ $tabs-height: $line-height-computed + $tab-padding-vertical * 2 + 1px + 1px;
     top: 0;
     right: 0;
     width: $tabs-buttons-width;
+    border-bottom: 1px solid $tab-border;
     background-color: $body-bg;
 
     > button {
       width: 50%;
-      height: $tabs-height;
+      height: $tabs-height - 1px;
       margin: 0;
       padding: 0;
       float: left;
       transition: opacity $transition-time;
       border: 0 none;
-      border-bottom: 1px solid $tab-border;
       border-radius: 0;
-      opacity: .8;
+      opacity: $icon-opacity;
       background-color: $body-bg;
       background-repeat: no-repeat;
       background-position: center center;
@@ -76,12 +76,16 @@ $tabs-height: $line-height-computed + $tab-padding-vertical * 2 + 1px + 1px;
 
       &:hover,
       &:active {
-        opacity: 1;
+        opacity: $icon-hover-opacity;
       }
 
       &:active {
         background-color: $tab-hover-bg;
       }
+
+      &.disabled {
+        opacity: $icon-opacity / 2;
+      }
     }
 
     .tab-left {

src/sass/components/_top.scss

@@ -67,14 +67,15 @@
   }
 
   ul {
+    @include clearfix;
     margin: 0;
     padding: 0;
   }
 
   li {
-    display: inline;
     margin: 0 .5em 0 0;
     padding: 0;
+    float: left;
     list-style-type: none;
     white-space: nowrap;
   }
@@ -154,10 +155,12 @@
 }
 
 #quick-search {
+  #header & {
     margin-top: floor(($header-title-line-height + $header-padding-vertical * 2 - $input-height-base) / 2) - 1px;
     margin-right: $header-padding-horizontal;
     float: right;
     color: $header-text;
+  }
 
   > * {
     vertical-align: top;
@@ -165,11 +168,11 @@
 
   form {
     display: inline-block;
-  }
 
     input {
       width: $quick-search-width;
     }
+  }
 
   > form > input,
   > select {
@@ -411,11 +414,12 @@
   .tabs-buttons {
     display: none !important; // scss-lint:disable ImportantRule
     padding-left: 0;
+    border-color: $main-menu-border;
     background-color: $main-menu-bg;
 
     > button {
       box-sizing: border-box;
-      height: $tabs-height;
+      height: $tabs-height - 1px;
       background-color: $main-menu-bg;
     }
   }

src/sass/components/_wiki.scss

@@ -23,10 +23,12 @@
   }
 }
 
-.controller-wiki .wiki > .preview,
+.controller-wiki {
+  .wiki > .preview,
   .wiki.wiki-preview {
     font-size: $wiki-font-size;
   }
+}
 
 div.wiki {
   color: $wiki-text;

src/sass/javascripts/_sidebar-toggler.scss

@@ -1,7 +1,4 @@
 @if $enable-sidebar-toggler {
-  $toggler-position-v:          1px;
-  $toggler-position-h:          -3px;
-
   #main {
     position: relative;
   }
@@ -35,7 +32,7 @@
   .sidebar-toggler {
     display: block;
     position: absolute;
-    top: $toggler-position-v;
+    top: 1px;
     width: 14px;
     height: 16px;
     border: 2px solid $gray-700;
@@ -56,11 +53,23 @@
     }
 
     @if $sidebar-position == "left" {
-      left: $toggler-position-h;
+      left: 0;
       background-image: inline-svg("chevron-left.svg", (path: (fill: $gray-700)));
+
+      @if not $fixed-layout {
+        border-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
     } @else {
-      right: $toggler-position-h;
+      right: 0;
       background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-700)));
+
+      @if not $fixed-layout {
+        border-right: 0;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
     }
 
     &.sidebar-hidden {