Adwaita: animate check and radios

This commit is contained in:
Lapo Calamandrei 2016-02-11 18:27:25 +01:00
parent 90d5c7f9e8
commit 460aa64c58
3 changed files with 95 additions and 2 deletions

View File

@ -2300,6 +2300,7 @@ radio {
-gtk-icon-shadow: none;
color: inherit;
border-color: currentColor;
animation: none;
}
}
}
@ -2320,6 +2321,36 @@ 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; }
}
@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:active, 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; }
}
/************
* GtkScale *

View File

@ -2870,7 +2870,8 @@ radio {
box-shadow: none;
-gtk-icon-shadow: none;
color: inherit;
border-color: currentColor; }
border-color: currentColor;
animation: none; }
check {
border-radius: 3px; }
@ -2886,6 +2887,36 @@ 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):checked {
animation: check_radio 400ms; }
check:indeterminate:checked:active, radio:indeterminate:checked {
animation: check_indeterminate 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; }
/************
* GtkScale *
************/

View File

@ -3003,7 +3003,8 @@ radio {
box-shadow: none;
-gtk-icon-shadow: none;
color: inherit;
border-color: currentColor; }
border-color: currentColor;
animation: none; }
check {
border-radius: 3px; }
@ -3019,6 +3020,36 @@ 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):checked {
animation: check_radio 400ms; }
check:indeterminate:checked:active, radio:indeterminate:checked {
animation: check_indeterminate 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; }
/************
* GtkScale *
************/