AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

Adwaita: flat button :hover and :active

Browse Source 
- special case undecorated button hovers
This commit is contained in:
Jakub Steiner 2020-12-10 14:16:25 +01:00
parent f83ee0be23
commit 6a33bed353
2 changed files with 45 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
gtk/theme/Adwaita/_common.scss
View File

@ -484,23 +484,6 @@ button {
@include focus-ring();
@at-root %button_basic_flat,
&.flat {
@include button(undecorated);
// to avoid adjacent buttons borders clashing when transitioning, the transition on the normal state is set
// to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
// it won't fade out when the pointer leave the button allocation area. To make the transition more evident
// in this case the duration is increased.
transition: none;
&:hover {
transition: $button_transition;
transition-duration: 500ms;
}
&:active { transition: $button_transition; }
&:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }
}
&:hover {
@include button(hover);
-gtk-icon-filter: brightness(1.2);
@ -539,6 +522,27 @@ button {
&:checked { @include button(insensitive-active); }
}
@at-root %button_basic_flat,
&.flat {
@include button(undecorated);
// to avoid adjacent buttons borders clashing when transitioning, the transition on the normal state is set
// to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
// it won't fade out when the pointer leave the button allocation area. To make the transition more evident
// in this case the duration is increased.
transition: none;
&:hover {
@include button(undecorated-hover);
transition: $button_transition;
transition-duration: 500ms;
}
&:active {
@include button(undecorated-active);
transition: $button_transition;
}
&:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }
}
&.image-button {
min-width: 24px;
padding-left: 5px;

24
gtk/theme/Adwaita/_drawing.scss
View File

@ -413,6 +413,30 @@
text-shadow: none;
-gtk-icon-shadow: none;
}
@else if $t==undecorated-hover {
border-color: transparent;
background-image: none;
box-shadow: none;
text-shadow: none;
@if $variant == 'light' {
background-color: darken($c,26%);
}
@else {
background-color: darken($c,10%);
}
}
@else if $t==undecorated-active {
border-color: transparent;
background-image: none;
box-shadow: none;
text-shadow: none;
@if $variant == 'light' {
background-color: darken($c,40%);
}
@else {
background-color: darken($c,14%);
}
}
}
@mixin headerbar_fill($c:$headerbar_bg_color, $hc:$top_hilight, $ov: none) {