Page MenuHomeWickedGov Phorge
Files F4139844

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;
}
@media ( hover: hover ) {
&:hover {
.citizen-ui-icon {
// 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-speechBubbles,
&.mw-ui-icon-wikimedia-userAdd {
transform: translateY( -2px );
}
// Move up to indicate going to the top
// rotate( 90deg ) is needed because of how the icon is set up
&.mw-ui-icon-wikimedia-first {
transform: translateY( -2px ) rotate( 90deg );
}
// 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 );
}
// Rotate the icon
&.mw-ui-icon-wikimedia-settings {
transform: rotate( 90deg );
}
}
}
}
}
.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
Wed, Aug 19, 15:14 (3 w, 5 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
aa/50/95267c499c77d2125d0f5bf6894d
Default Alt Text
IconAnimation.less (1 KB)

Event Timeline