Merge pull request #178 from mrliptontea/issue-177-icon-lose-hover
Fix #177 change styling for icon-only buttons
This commit is contained in:
Grzegorz Rajchman
GitHub
@@ -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.
|
||||
|
||||
@@ -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: (
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
//
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -628,6 +628,10 @@ label[for="closed"] {
|
||||
label {
|
||||
@include check-list;
|
||||
}
|
||||
|
||||
.gravatar {
|
||||
margin-right: $padding-small-vertical;
|
||||
}
|
||||
}
|
||||
|
||||
#watchers_inputs {
|
||||
|
||||
@@ -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; }
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -92,6 +92,8 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
.journal > div + .contextual {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border: 0;
|
||||
|
||||
> .heart-link-with-count {
|
||||
|
||||
@@ -131,7 +131,7 @@ body {
|
||||
|
||||
ul {
|
||||
li:nth-child(n) {
|
||||
a {
|
||||
a:not(.icon-only) {
|
||||
height: auto;
|
||||
padding: $padding-large-vertical $padding-large-horizontal;
|
||||
line-height: $line-height-base;
|
||||
@@ -147,13 +147,15 @@ body {
|
||||
}
|
||||
|
||||
.icon-only {
|
||||
flex: 0 0 40px;
|
||||
flex: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
padding-left: 40px;
|
||||
text-align: center;
|
||||
text-overflow: initial;
|
||||
|
||||
&::before {
|
||||
line-height: inherit;
|
||||
width: 40px;
|
||||
margin-left: -40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -224,7 +226,7 @@ body {
|
||||
|
||||
#admin-menu {
|
||||
a {
|
||||
background-position: 8px center;
|
||||
background-position: 8px center !important; // stylelint-disable-line declaration-no-important
|
||||
|
||||
&.additionals {
|
||||
padding-left: 32px !important; // stylelint-disable-line declaration-no-important
|
||||
@@ -259,7 +261,7 @@ body {
|
||||
}
|
||||
|
||||
.delete {
|
||||
flex: 0 0 24px;
|
||||
margin-right: $padding-large-vertical;
|
||||
margin-left: auto;
|
||||
float: none;
|
||||
text-align: center;
|
||||
@@ -425,6 +427,10 @@ body {
|
||||
|
||||
#admin-index > #admin-menu li {
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
background-position: 8px center !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user