gtk/button: Add hover overlay for raised buttons
As per Material Design guidelines.
This is helpful for dark variant particularly.
by roundabout, Friday, 20 March 2020, 03:10:02 (1584673802), pushed by roundabout, Sunday, 11 May 2025, 13:22:50 (1746969770)
Author identity: nana-4 <hnmaigo@gmail.com>
2b040ad81f7daa07761a49394efb852e85a4f5b9
src/_sass/gtk/_drawing-3.20.scss
@@ -113,11 +113,13 @@ $ripple-active-transition-duration: $duration, $ripple-fade-in-duration, 0ms, 0m
$opacity-modifier: .04;
}
box-shadow: inset 0 0 0 9999px transparent, $shadow-z2;
&:drop(active),
&:hover {
box-shadow: inset 0 0 0 9999px transparent, $shadow-z4;
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-hover-opacity + $opacity-modifier), $shadow-z4;
}
&:focus {
@@ -125,7 +127,7 @@ $ripple-active-transition-duration: $duration, $ripple-fade-in-duration, 0ms, 0m
}
&:active {
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-hover-opacity + $opacity-modifier), $shadow-z8;
box-shadow: inset 0 0 0 9999px rgba($color, $overlay-focus-opacity + $opacity-modifier), $shadow-z8;
background-image: radial-gradient(circle, rgba($color, $overlay-active-opacity + $opacity-modifier) 10%, transparent 0%);
}
}