paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 13:33:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

buttons: Add transition effect and use clip-path for scaling animation.

Browse Source 
This commit replaces the use of `scale`, with `clip-path` for showing
the shrinking animation on the active state of action buttons. This
prevents the font and the icon from scaling with the element, which
removes the unwanted jitter during the animation.

The commit also makes necessary changes to the focus outline on the
buttons, to accommodate the use of clip-path and to improve the visuals.

This commit also adds the `transition` property to the action buttons
to smooth out the animations between the element states.
This commit is contained in:
Sayam Samal
2025-01-04 09:01:16 +05:30
committed by Tim Abbott
parent 3a22dbea4d
commit 06ecc04d2f
1 changed files with 30 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
web/styles/buttons.css
View File

@@ -16,18 +16,29 @@
user-select: none;
border: none;
cursor: pointer;
clip-path: inset(-1px);
transition: none 0.05s ease-in;
transition-property: background-color, clip-path;
&:hover {
background-color: var(
--color-background-neutral-quiet-action-button-hover
);
transition: none 0.1s ease-out;
transition-property: background-color, clip-path;
}
&:active {
background-color: var(
--color-background-neutral-quiet-action-button-active
);
scale: 0.96;
clip-path: inset(1px round 4px);
}
&:focus-visible {
outline-offset: 2px;
outline-width: 1px;
clip-path: inset(-3px);
}
&:focus {
@@ -373,11 +384,29 @@
cursor: pointer;
border: none;
border-radius: 4px;
clip-path: inset(-1px);
transition: none 0.05s ease-in;
transition-property: background-color, clip-path;
&:focus {
/* Override common button outline style set in zulip.css and dark_theme.css */
outline: none;
}
&:hover {
transition: none 0.1s ease-out;
transition-property: background-color, clip-path;
}
&:active {
clip-path: inset(1px round 4px);
}
&:focus-visible {
outline-offset: 2px;
outline-width: 1px;
clip-path: inset(-3px);
}
}
.icon-button-neutral {