HC: Add border/hilight when hovering flat buttons

The border and icon highlight are useful feedback that was defeated by
CSS precedence. It worked for .titlebuttons due to their implementation,
but the same was not true for custom .flat buttons. This makes it so.

https://bugzilla.gnome.org/show_bug.cgi?id=788580
This commit is contained in:
Daniel Boles 2017-10-06 02:32:37 +01:00
parent 61137ae163
commit fa04eb26d7
3 changed files with 4 additions and 3 deletions

View File

@ -421,7 +421,8 @@ button {
}
}
&:hover {
&:hover,
&.flat:hover {
@include button(hover);
-gtk-icon-effect: highlight;
}

View File

@ -178,7 +178,7 @@ button.sidebar-button:hover:active, button.titlebutton:hover:active, button.flat
button.sidebar-button:backdrop, button.titlebutton:backdrop, button.sidebar-button:disabled, button.titlebutton:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: transparent; background-image: none; border-color: transparent; }
button.titlebutton:hover, button:hover { border-width: 2px; border-style: solid; color: #fff; background-color: #000; border-color: gray; background-image: none; -gtk-icon-effect: highlight; }
button.titlebutton:hover, button.sidebar-button:hover, button.titlebutton:hover, button:hover, button.flat:hover { border-width: 2px; border-style: solid; color: #fff; background-color: #000; border-color: gray; background-image: none; -gtk-icon-effect: highlight; }
button.titlebutton:active, button.titlebutton:checked, button:active, button:checked { border-width: 2px; border-style: solid; background-image: none; color: black; background-color: white; border-color: gray; transition-duration: 50ms; }

View File

@ -178,7 +178,7 @@ button.sidebar-button:hover:active, button.titlebutton:hover:active, button.flat
button.sidebar-button:backdrop, button.titlebutton:backdrop, button.sidebar-button:disabled, button.titlebutton:disabled, button.sidebar-button:backdrop:disabled, button.titlebutton:backdrop:disabled, button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: transparent; background-image: none; border-color: transparent; }
button.titlebutton:hover, button:hover { border-width: 2px; border-style: solid; color: #000; background-color: #fff; border-color: gray; background-image: none; -gtk-icon-effect: highlight; }
button.titlebutton:hover, button.sidebar-button:hover, button.titlebutton:hover, button:hover, button.flat:hover { border-width: 2px; border-style: solid; color: #000; background-color: #fff; border-color: gray; background-image: none; -gtk-icon-effect: highlight; }
button.titlebutton:active, button.titlebutton:checked, button:active, button:checked { border-width: 2px; border-style: solid; background-image: none; color: white; background-color: black; border-color: gray; transition-duration: 50ms; }