[wp-trac] [WordPress Trac] #42853: Change password UI: Cancel button invisible on small screens

[WordPress Trac]

#42853: Change password UI: Cancel button invisible on small screens
---------------------------------------+--------------------------------
 Reporter:  afercia                    |       Owner:  chetan200891
     Type:  defect (bug)               |      Status:  assigned
 Priority:  normal                     |   Milestone:  5.2
Component:  Users                      |     Version:
 Severity:  normal                     |  Resolution:
 Keywords:  has-patch has-screenshots  |     Focuses:  ui, accessibility
---------------------------------------+--------------------------------
Changes (by afercia):

 * keywords:  has-patch has-screenshots needs-refresh => has-patch has-
     screenshots


Comment:

 Let's make the Cancel icon visible only on mobile.

 [attachment:"42853.diff"] does the following:
 - add the `dashicons-no` icon to the Cancel button, visible only in the
 mobile view
 - makes the input field a bit taller to simplify the CSS and better align
 the input with the buttons
 - in the mobile view, the input and the buttons have a 40 pixels height
 - this changes also the height of all the login inputs from 36 to 40
 pixels
 - in the mobile view, restores the focus style of the buttons
 - cleans-up the CSS
 - moves focus back to the Generate Password button when closing the form

 Screenshot before and after:

 [[Image(http://cldup.com/Zjqp_ZKrKl.jpg)]]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/42853#comment:12>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform