Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#29021 closed defect (bug) (fixed)

Standardize transition-animations on modal close/arrow buttons

Reported by: celloexpressions's profile celloexpressions Owned by: ocean90's profile ocean90
Milestone: 4.0 Priority: normal
Severity: normal Version: 4.0
Component: General Keywords: has-patch
Focuses: ui Cc:


The newer style of modal top-bar actions (left/right arrows and close buttons typically) was originally introduced with the new themes browser. Currently, it's used in the following places:

  • Media Grid details modal (arrows, X)
  • Media Library (X)
  • Plugin installer (X)
  • Theme Browser (arrows, X)
  • Theme-install Previewer (arrows, X)
  • Customizer (X, back arrow)

Most of these were added in 4.0. But they all have slightly different behavior for their CSS transitions to the hover/focus states. Originally, it was color ease-in .1s, which was inherited from the Dashicons css. But that doesn't look very good, since the background color changes significantly and doesn't get animated. Many of the newer instances of these style of buttons have no transition.

Let's standardize all of these to either transition both the color and the background color or to have no transitions. (let's also make them consistently not have the focus outline, as their focus styling is otherwise sufficient).

Attachments (1)

29021.diff (3.8 KB) - added by celloexpressions 10 years ago.
Use a subtle transition on color and background color, add missing focus selectors, remove focus outline/box-shadow.

Download all attachments as: .zip

Change History (4)

10 years ago

Use a subtle transition on color and background color, add missing focus selectors, remove focus outline/box-shadow.

#1 @celloexpressions
10 years ago

  • Keywords has-patch added; needs-patch removed
  • Version set to trunk

29021.diff covers them all I think. I think the fast transition (.1s) is snappy enough and makes the color inversion easier on the eyes, so I've only patched that for now. Needs auto-prefixer for the transitions.

Also, these are sized slightly differently in different places, so while it may be nice to use a common class for them, I don't know that that would help much for now.

#2 @ocean90
10 years ago

  • Owner set to ocean90
  • Resolution set to fixed
  • Status changed from new to closed

In 29365:

Standardize transition-animations on modal close/arrow buttons.

props celloexpressions.
fixes #29021.

This ticket was mentioned in IRC in #wordpress-dev by celloexpressions. View the logs.

10 years ago

Note: See TracTickets for help on using tickets.