Skip to content

Commit

Permalink
Remove animation from mover buttons. (#25728)
Browse files Browse the repository at this point in the history
The animation was intended to better convey direction, and were added as an experiment. It doesn't seem successful, so let's remove it again.
  • Loading branch information
jasmussen authored Sep 30, 2020
1 parent 25be2e6 commit 071f88d
Showing 1 changed file with 1 addition and 44 deletions.
45 changes: 1 addition & 44 deletions packages/block-editor/src/components/block-list/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -538,63 +538,20 @@
.block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
min-width: $block-toolbar-height/2;
width: $block-toolbar-height/2;

// Animate buttons on hover.
&.is-up-button {
svg {
transition: ease-in-out transform 0.1s;
@include reduce-motion("transition");
}
&:focus,
&:hover {
svg {
transform: translateX(-2px);
}
}
}

&.is-down-button {
svg {
transition: ease-in-out transform 0.1s;
@include reduce-motion("transition");
}
&:focus,
&:hover {
svg {
transform: translateX(2px);
}
}
}
}

.block-editor-block-mover:not(.is-horizontal) {
// Position SVGs. Animate buttons on hover.
// Position SVGs.
.block-editor-block-mover-button {
&.is-up-button {
svg {
margin-top: 2px;
transition: ease-in-out transform 0.1s;
@include reduce-motion("transition");
}
&:focus,
&:hover {
svg {
transform: translateY(-2px);
}
}
}

&.is-down-button {
svg {
margin-bottom: 3px;
transition: ease-in-out transform 0.1s;
@include reduce-motion("transition");
}
&:focus,
&:hover {
svg {
transform: translateY(2px);
}
}
}

Expand Down

0 comments on commit 071f88d

Please sign in to comment.