Merge pull request #92 from mrliptontea/issue-89-custom-menu-plugin-b…

…reaks-layout

Fix top menu layout with custom_menu plugin

README.md

@@ -56,6 +56,10 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe
 
 ## Changelog
 
+Latest:
+
+* 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

src/sass/components/_base.scss

@@ -147,6 +147,11 @@ hr {
   margin-bottom: $line-height-computed;
   border: 0;
   border-top: 1px solid $hr-border;
+
+  li & {
+    margin-top:    $line-height-computed / 2;
+    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/_icons.scss

@@ -703,6 +703,7 @@ div.wiki {
 .other-formats {
   %other-format {
     @extend %fa-icon;
+    background-image: none;
 
     &::before {
       margin-right: .3em;

src/sass/components/_plugins.scss

@@ -179,6 +179,67 @@
 
 
 
+//
+// 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
 // http://www.redminecrm.com/projects/people/

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,21 +155,23 @@
 }
 
 #quick-search {
-  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;
+  #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;
   }
 
   form {
     display: inline-block;
-  }
 
-  input {
-    width: $quick-search-width;
+    input {
+      width: $quick-search-width;
+    }
   }
 
   > form > input,