mediawiki-skins-Citizen/resources/skins.citizen.styles/components/IconAnimation.less
2024-10-19 02:27:42 -04:00

49 lines
965 B
Plaintext

/*
* Add some microinteraction to Codex icons with CSS
* We should look into animating the SVG directly at some point
*/
:is( a,
button,
summary ) {
.citizen-ui-icon {
transition: var( --transition-hover );
transition-property: transform;
}
@media ( hover: hover ) {
&:hover {
.citizen-ui-icon {
&.mw-ui-icon-wikimedia-edit {
transform: translateX( -2px );
}
&.mw-ui-icon-wikimedia-ellipsis {
transform: rotate( -90deg );
}
&.mw-ui-icon-wikimedia-first {
transform: translateY( -2px ) rotate( 90deg );
}
&.mw-ui-icon-wikimedia-history {
transform: rotate( -270deg );
}
&.mw-ui-icon-wikimedia-logIn,
&.mw-ui-icon-wikimedia-share {
transform: translateX( 2px );
}
&.mw-ui-icon-wikimedia-settings {
transform: rotate( 90deg );
}
&.mw-ui-icon-wikimedia-speechBubbles,
&.mw-ui-icon-wikimedia-userAdd {
transform: translateY( -2px );
}
}
}
}
}