forked from AuroraMiddleware/gtk
Adwaita: use a transition to animate checks and radios
see https://bugzilla.gnome.org/show_bug.cgi?id=762260
This commit is contained in:
Lapo Calamandrei
parent
ddee89f4a3
commit
15b2dbf9a8
@ -2626,7 +2626,6 @@ radio {
|
||||
-gtk-icon-shadow: none;
|
||||
color: inherit;
|
||||
border-color: currentColor;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2653,34 +2652,28 @@ radio {
|
||||
-gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
|
||||
}
|
||||
|
||||
// let's animate things
|
||||
@keyframes check_check {
|
||||
from { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
|
||||
to { -gtk-icon-transform: unset; }
|
||||
// ANIMATION:
|
||||
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
|
||||
// the transformation is set on the active state and it get reset on the checked state.
|
||||
radio:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: scale(0); }
|
||||
|
||||
check:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
|
||||
|
||||
radio,
|
||||
check {
|
||||
&:active { -gtk-icon-transform: scale(0, 1); } // should tackle the indeterminate state, untested
|
||||
|
||||
&:checked:not(:backdrop), &:indeterminate:not(:backdrop) {
|
||||
-gtk-icon-transform: unset;
|
||||
transition: 400ms;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes check_radio {
|
||||
from { -gtk-icon-transform: scale(0); }
|
||||
to { -gtk-icon-transform: unset; }
|
||||
}
|
||||
|
||||
@keyframes check_indeterminate {
|
||||
from { -gtk-icon-transform: scale(0, 1); }
|
||||
to { -gtk-icon-transform: unset; }
|
||||
}
|
||||
|
||||
check:not(:indeterminate):checked { animation: check_check 400ms; }
|
||||
|
||||
radio:not(:indeterminate):checked { animation: check_radio 400ms; }
|
||||
|
||||
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate 400ms; }
|
||||
|
||||
// no animations in menus
|
||||
menu menuitem {
|
||||
check:not(:indeterminate):checked,
|
||||
radio:not(:indeterminate):checked,
|
||||
check:indeterminate:checked:active,
|
||||
radio:indeterminate:checked { animation: none; }
|
||||
radio,
|
||||
check {
|
||||
&:checked:not(:backdrop), &:indeterminate:not(:backdrop) { transition: none; }
|
||||
}
|
||||
}
|
||||
|
||||
treeview.view check,
|
||||
|
||||
@ -2970,8 +2970,7 @@ radio {
|
||||
box-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: inherit;
|
||||
border-color: currentColor;
|
||||
animation: none; }
|
||||
border-color: currentColor; }
|
||||
|
||||
check {
|
||||
border-radius: 3px; }
|
||||
@ -2990,35 +2989,25 @@ radio {
|
||||
radio:indeterminate {
|
||||
-gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
|
||||
|
||||
@keyframes check_check {
|
||||
from {
|
||||
-gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
|
||||
to {
|
||||
-gtk-icon-transform: unset; } }
|
||||
@keyframes check_radio {
|
||||
from {
|
||||
-gtk-icon-transform: scale(0); }
|
||||
to {
|
||||
-gtk-icon-transform: unset; } }
|
||||
@keyframes check_indeterminate {
|
||||
from {
|
||||
-gtk-icon-transform: scale(0, 1); }
|
||||
to {
|
||||
-gtk-icon-transform: unset; } }
|
||||
check:not(:indeterminate):checked {
|
||||
animation: check_check 400ms; }
|
||||
radio:not(:indeterminate):not(:checked):active:not(:backdrop) {
|
||||
-gtk-icon-transform: scale(0); }
|
||||
|
||||
radio:not(:indeterminate):checked {
|
||||
animation: check_radio 400ms; }
|
||||
check:not(:indeterminate):not(:checked):active:not(:backdrop) {
|
||||
-gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
|
||||
|
||||
check:indeterminate:checked, radio:indeterminate:checked {
|
||||
animation: check_indeterminate 400ms; }
|
||||
radio:active,
|
||||
check:active {
|
||||
-gtk-icon-transform: scale(0, 1); }
|
||||
radio:checked:not(:backdrop), radio:indeterminate:not(:backdrop),
|
||||
check:checked:not(:backdrop),
|
||||
check:indeterminate:not(:backdrop) {
|
||||
-gtk-icon-transform: unset;
|
||||
transition: 400ms; }
|
||||
|
||||
menu menuitem check:not(:indeterminate):checked,
|
||||
menu menuitem radio:not(:indeterminate):checked,
|
||||
menu menuitem check:indeterminate:checked:active,
|
||||
menu menuitem radio:indeterminate:checked {
|
||||
animation: none; }
|
||||
menu menuitem radio:checked:not(:backdrop), menu menuitem radio:indeterminate:not(:backdrop),
|
||||
menu menuitem check:checked:not(:backdrop),
|
||||
menu menuitem check:indeterminate:not(:backdrop) {
|
||||
transition: none; }
|
||||
|
||||
treeview.view check:selected:focus, treeview.view check:selected,
|
||||
treeview.view radio:selected:focus,
|
||||
|
||||
@ -3000,8 +3000,7 @@ radio {
|
||||
box-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
color: inherit;
|
||||
border-color: currentColor;
|
||||
animation: none; }
|
||||
border-color: currentColor; }
|
||||
|
||||
check {
|
||||
border-radius: 3px; }
|
||||
@ -3020,35 +3019,25 @@ radio {
|
||||
radio:indeterminate {
|
||||
-gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
|
||||
|
||||
@keyframes check_check {
|
||||
from {
|
||||
-gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
|
||||
to {
|
||||
-gtk-icon-transform: unset; } }
|
||||
@keyframes check_radio {
|
||||
from {
|
||||
-gtk-icon-transform: scale(0); }
|
||||
to {
|
||||
-gtk-icon-transform: unset; } }
|
||||
@keyframes check_indeterminate {
|
||||
from {
|
||||
-gtk-icon-transform: scale(0, 1); }
|
||||
to {
|
||||
-gtk-icon-transform: unset; } }
|
||||
check:not(:indeterminate):checked {
|
||||
animation: check_check 400ms; }
|
||||
radio:not(:indeterminate):not(:checked):active:not(:backdrop) {
|
||||
-gtk-icon-transform: scale(0); }
|
||||
|
||||
radio:not(:indeterminate):checked {
|
||||
animation: check_radio 400ms; }
|
||||
check:not(:indeterminate):not(:checked):active:not(:backdrop) {
|
||||
-gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
|
||||
|
||||
check:indeterminate:checked, radio:indeterminate:checked {
|
||||
animation: check_indeterminate 400ms; }
|
||||
radio:active,
|
||||
check:active {
|
||||
-gtk-icon-transform: scale(0, 1); }
|
||||
radio:checked:not(:backdrop), radio:indeterminate:not(:backdrop),
|
||||
check:checked:not(:backdrop),
|
||||
check:indeterminate:not(:backdrop) {
|
||||
-gtk-icon-transform: unset;
|
||||
transition: 400ms; }
|
||||
|
||||
menu menuitem check:not(:indeterminate):checked,
|
||||
menu menuitem radio:not(:indeterminate):checked,
|
||||
menu menuitem check:indeterminate:checked:active,
|
||||
menu menuitem radio:indeterminate:checked {
|
||||
animation: none; }
|
||||
menu menuitem radio:checked:not(:backdrop), menu menuitem radio:indeterminate:not(:backdrop),
|
||||
menu menuitem check:checked:not(:backdrop),
|
||||
menu menuitem check:indeterminate:not(:backdrop) {
|
||||
transition: none; }
|
||||
|
||||
treeview.view check:selected:focus, treeview.view check:selected,
|
||||
treeview.view radio:selected:focus,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user