[wp-trac] [WordPress Trac] #65207: Introduce utility class to handle 32px form elements on mobile layouts

[WordPress Trac]

#65207: Introduce utility class to handle 32px form elements on mobile layouts
--------------------------------+-----------------------------
 Reporter:  wildworks           |      Owner:  (none)
     Type:  enhancement         |     Status:  new
 Priority:  normal              |  Milestone:  Awaiting Review
Component:  General             |    Version:
 Severity:  normal              |   Keywords:  admin-reskin
  Focuses:  ui, administration  |
--------------------------------+-----------------------------
 Form element sizes are basically `40px`, but `32px` is used in some
 places.

 {{{
 #!css
 // CSS specificity: 0,2,1
 .selector input[type="search"] {
         min-height: 32px;
 }
 }}}

 On mobile layouts, the following style expects all form elements to be
 `40px`:

 {{{
 #!css
 // CSS specificity: 0,1,1
 @media screen and (max-width: 782px) {
         input[type="search"] {
                 min-height: 40px;
         }
 }
 }}}

 However, this has lower specificity than the CSS above, so it doesn't
 apply. As a result, an individual override style like the following is
 required for mobile layouts:

 {{{
 #!css
 @media screen and (max-width: 782px) {
         .selector input[type="search"] {
                 min-height: 40px;
         }
 }
 }}}

 This is very easy to overlook, and as reported in #64999, mobile layout
 styles are sometimes missing.

 To solve these issues, I propose adding a new utility class, like `form-
 compact`, for cases where `32px` form elements are needed. For example:

 {{{
 #!css
 .form-compact {
         min-height: 32px;
 }
 @media screen and (max-width: 782px) {
         .form-compact {
                 min-height: 40px;
         }
 }
 }}}

 A similar utility class `.button-compact` exists for buttons.

 cc @sabernhardt @fabiankaegy @joedolson

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/65207>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform