Page MenuHomeWickedGov Phorge
Files F4162423

IconAnimation.less
No OneTemporary
Actions

Size
1 KB
Referenced Files
None
Subscribers
None

IconAnimation.less
View Options

/**
* Microinteractions for icons
* TODO: Look into animating the SVG directly
*/
:is( a,
button,
summary ) {
.citizen-ui-icon {
transition: var( --transition-hover );
transition-property: transform;
&.mw-ui-icon-wikimedia-configure {
// HACK: Manually rotate the configure icon to create an illusion
// that the sliders are being moved.
transition: none;
}
}
@media ( hover: hover ) {
&:hover {
.citizen-ui-icon {
&.mw-ui-icon-wikimedia-configure {
transform: rotate( 180deg );
}
// Move pen to the right like drawing a line
// TODO: Perhaps we can add a line somehow through CSS
&.mw-ui-icon-wikimedia-edit {
transform: translateX( 2px );
}
// Spin anti-clockwise like a door handle, to open a vertical menu
&.mw-ui-icon-wikimedia-ellipsis {
transform: rotate( -90deg );
}
// Move up
&.mw-ui-icon-wikimedia-arrowUp,
&.mw-ui-icon-wikimedia-speechBubbles,
&.mw-ui-icon-wikimedia-userAdd {
transform: translateY( -2px );
}
// Spin anti-clockwise and get the arrow to point backward
&.mw-ui-icon-wikimedia-history {
transform: rotate( -270deg );
}
// Move towards where the arrow is pointing
&.mw-ui-icon-wikimedia-logIn,
&.mw-ui-icon-wikimedia-share {
transform: translateX( 2px );
}
}
}
}
}
.citizen-header__logo {
.mw-logo-icon,
.citizen-ui-icon {
transform-origin: center center;
transition-timing-function: var( --transition-timing-function-ease );
transition-duration: var( --transition-duration-base );
transition-property: color, transform, opacity;
}
.citizen-header__button {
color: transparent;
&:hover {
color: var( --color-base );
.mw-logo-icon {
opacity: 0;
}
.mw-logo-icon,
.citizen-ui-icon {
transform: rotate( 360deg );
transition-duration: var( --transition-duration-medium );
}
}
}
}

File Metadata

Mime Type
text/plain
Expires
Aug 20 2026, 01:30 (10 w, 23 h ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
f0/09/c090e2f36006f2e9de50c6e31384
Default Alt Text
IconAnimation.less (1 KB)

Event Timeline