Merge pull request #178 from mrliptontea/issue-177-icon-lose-hover

Fix #177 change styling for icon-only buttons

README.md

@@ -56,6 +56,13 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe
 
 ## Changelog
 
+Latest (master):
+
+* 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.
+
 v2.10.2 (2020-04-09):
 
 * Fixed #175: couldn't edit note when it's URL target.

src/sass/_variables.scss

@@ -405,6 +405,7 @@ $btn-success-border:            $btn-success-bg !default;
 //== Action icons
 //
 
+$icon-width:                    20px !default;
 $icon-opacity:                  .7 !default;
 $icon-hover-opacity:            1 !default;
 $icon-color-map: (

src/sass/components/_admin.scss

@@ -8,7 +8,7 @@
       list-style-type: none;
 
       > a:not(.icon-only) {
-        padding-left: $sidebar-padding-horizontal + 5px + 20px;
+        padding-left: $sidebar-padding-horizontal + 5px + $icon-width;
         background-repeat: no-repeat;
         background-position: $sidebar-padding-horizontal center;
       }
@@ -27,7 +27,7 @@
 
     a {
       display: inline-block;
-      padding-left: 5px + 20px;
+      padding-left: 5px + $icon-width;
       background-position: 0 center;
     }
   }

src/sass/components/_buttons.scss

@@ -148,6 +148,7 @@ p.buttons,
 //
 
 #issue-form,
+.mypage-box,
 .journal,
 .edit_news,
 .edit_content,
@@ -159,6 +160,17 @@ p.buttons,
 }
 
 
+//== Apply + clear
+//
+
+input,
+select {
+  + a {
+    margin-left: ceil($btn-padding-horizontal-small / 2);
+  }
+}
+
+
 //== Action buttons group
 //
 

src/sass/components/_dropdown.scss

@@ -62,10 +62,10 @@
       border-radius: $border-radius-base - 1px;
 
       &.icon {
-        padding-left: 20px + $btn-padding-horizontal-small;
+        padding-left: $icon-width + $btn-padding-horizontal-small;
 
         &::before {
-          width: 20px;
+          width: $icon-width;
           margin-top: 3px;
           float: left;
           text-align: center;
@@ -94,8 +94,8 @@
       color: $pagination-color;
       text-align: center;
 
-      > .icon-only::before {
-        margin: 0 1px;
+      > .icon-only {
+        margin: 0 -4px;
       }
 
       &:hover,

src/sass/components/_elements.scss

@@ -118,12 +118,13 @@ img {
 .filecontent-container {
   position: relative;
   min-height: 200px;
-  margin-bottom: 20px;
-}
-.filecontent-container > .filecontent {
-  position: absolute;
-  max-width: 100%;
-  max-height: 100%;
+  margin-bottom: $line-height-computed;
+
+  > .filecontent {
+    position: absolute;
+    max-width: 100%;
+    max-height: 100%;
+  }
 }
 
 //== Responsive autoscroll
@@ -252,6 +253,10 @@ img {
     @include check;
     display: block;
   }
+
+  .gravatar {
+    margin-right: $padding-small-vertical;
+  }
 }
 
 .roles-selection {
@@ -279,11 +284,13 @@ p.subtitle {
 }
 
 .block-receiver {
+  box-sizing: border-box;
   min-height: 20px;
-  margin: $padding-side / -2;
   margin-bottom: $line-height-computed;
-  padding: $padding-side / 2;
-  outline: 2px dashed $gray-600;
+
+  .dragging & {
+    outline: 2px dashed $gray-600;
+  }
 }
 
 .mypage-box {
@@ -335,22 +342,6 @@ a.close-icon {
 
 // For Redmine 3.4+
 #my-page {
-  .block-receiver {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    outline: none;
-  }
-
-  &.dragging .block-receiver {
-    box-sizing: border-box;
-    min-height: 20px;
-    margin: $padding-side / -2;
-    margin-bottom: $line-height-computed;
-    padding: $padding-side / 2;
-    outline: 2px dashed $gray-600;
-  }
-
   .mypage-box {
     > .contextual {
       transition: opacity $transition-time;

src/sass/components/_forms.scss

@@ -628,6 +628,10 @@ label[for="closed"] {
   label {
     @include check-list;
   }
+
+  .gravatar {
+    margin-right: $padding-small-vertical;
+  }
 }
 
 #watchers_inputs {

src/sass/components/_icons.scss

@@ -35,33 +35,28 @@ table.list .buttons > a::before {
 //== Buttons icons
 //
 
-.icon {
+.icon,
+.icon-only:not(.toggle-multiselect) {
   @extend %fa-icon;
-  padding-left: 20px;
+  padding-left: $icon-width;
   background-repeat: no-repeat;
   background-position: 0% 50%;
 
   &::before {
-    margin-left: -20px;
+    margin-left: -$icon-width;
   }
 }
 
 .icon-only {
-  @extend %fa-icon;
-  font-size: 0;
+  display: inline-block;
+  width: 0;
+  overflow: hidden;
+  vertical-align: top;
   white-space: nowrap;
 
-  @at-root a#{&} {
-    // stylelint-disable declaration-no-important
-    display: inline;
-    width: auto !important;
-    height: auto !important;
-    padding-left: 0 !important;
-    font-size: 0 !important;
-  }
-
   &::before {
-    font-size: $font-size-base;
+    width: $icon-width;
+    text-align: center;
   }
 }
 
@@ -205,7 +200,7 @@ a.icon-del {
 .icon-folder,
 .icon-file {
   &::before {
-    width: 16px;
+    width: $icon-width;
     text-align: center;
   }
 }
@@ -253,12 +248,11 @@ a.icon-del {
 .icon-expended,
 .icon-collapsed {
   &::before {
-    width: 1em;
     text-align: center;
   }
 
   &.icon {
-    padding-left: 20px;
+    padding-left: $icon-width;
   }
 
   &.expander {
@@ -267,7 +261,7 @@ a.icon-del {
 }
 
 .icon-zoom-in + .icon-zoom-out {
-  margin-left: 5px;
+  margin-left: $padding-small-vertical;
 }
 
 
@@ -289,19 +283,19 @@ a.icon-del {
 #admin-menu {
   #admin-index > & {
     a {
-      padding-left: 5px + 20px;
+      padding-left: 5px + $icon-width;
     }
   }
 
   li {
     > a {
-      padding-left: $sidebar-padding-horizontal + 5px + 20px;
+      padding-left: $sidebar-padding-horizontal + 5px + $icon-width;
 
       &::before {
         display: inline-block;
-        width: 20px;
+        width: $icon-width;
         margin: 0;
-        margin-left: -(5px + 20px);
+        margin-left: -(5px + $icon-width);
         padding: 0;
         color: $gray-700;
         text-align: center;
@@ -402,8 +396,6 @@ a.icon-del {
 
   &::before {
     content: $fa-var-arrows-v;
-    width: 16px;
-    margin: 0;
   }
 
   &.ajax-loading {
@@ -430,8 +422,8 @@ div.projects h3 {
   color: $gray-900;
 
   &::before {
-    width: 1em;
-    margin-right: .5em;
+    width: $icon-width;
+    margin-right: $padding-small-vertical;
     transform: translateY(-.1em);
     color: $gray-700;
     text-align: center;
@@ -441,7 +433,7 @@ div.projects h3 {
 h3.version::before      { content: $fa-var-cube; }
 h3.comments::before     { content: $fa-var-comments; }
 div.issues h3::before   { content: $fa-var-ticket; }
-div.members h3::before  { content: $fa-var-user; }
+div.members h3::before  { content: $fa-var-users; }
 div.news h3::before     { content: $fa-var-newspaper-o; }
 div.projects h3::before { content: $fa-var-cubes; }
 

src/sass/components/_jquery-ui.scss

@@ -320,4 +320,12 @@ img.ui-datepicker-trigger {
   @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/_list.scss

@@ -52,7 +52,7 @@ table.list {
     vertical-align: top;
 
     &.icon {
-      padding-left: $table-cell-padding + 20px;
+      padding-left: $table-cell-padding + $icon-width;
     }
 
     &.id,
@@ -137,10 +137,10 @@ table.list {
       white-space: nowrap;
 
       a {
-        padding-right: 5px;
+        margin-right: $padding-small-vertical;
 
         &.icon-only {
-          padding: 0;
+          margin-right: 0;
         }
       }
 
@@ -265,14 +265,31 @@ tr.issue {
 }
 
 tr {
-  span.expander:not(.icon) {
-    margin-left: 0;
-    padding-left: 8px;
-    background-image: inline-svg("plus.svg", (path: (fill: $btn-default-icon-color)));
-    background-repeat: no-repeat;
-    background-position: center center;
-    cursor: pointer;
-    user-select: none;
+  span.expander {
+    display: inline-block;
+    padding: 0;
+    float: left;
+
+    &.icon {
+      padding-left: 18px;
+      text-align: center;
+
+      &::before {
+        margin: 0 0 0 -18px;
+        color: $gray-600;
+        font-size: 12px;
+      }
+    }
+
+    &:not(.icon) {
+      width: 18px;
+      padding: 0;
+      background-image: inline-svg("plus.svg", (path: (fill: $btn-default-icon-color)));
+      background-repeat: no-repeat;
+      background-position: center center;
+      cursor: pointer;
+      user-select: none;
+    }
   }
 
   &.open span.expander:not(.icon) {
@@ -345,7 +362,7 @@ tr.entry {
   &.file td {
     &.filename a,
     &.filename_no_report a {
-      margin-left: 16px;
+      margin-left: 18px;
     }
   }
 }
@@ -649,7 +666,7 @@ table.files {
 
   tr.file td {
     &.filename {
-      padding-left: 20px + $table-cell-padding;
+      padding-left: $icon-width + $table-cell-padding;
       text-align: left;
     }