Make WordPress Core

Changeset 46243


Ignore:
Timestamp:
09/23/2019 03:26:23 PM (4 years ago)
Author:
afercia
Message:

Accessibility: Improve and modernize user interface controls. Third part: allow buttons and form controls to scale with text.

Props kjellr, abrightclearweb, audrasjb.
Fixes #47477.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/forms.css

    r46242 r46243  
    6565/* Vertically align the number selector with the input. */
    6666input[type="number"] {
    67     height: 28px;
     67    min-height: 28px;
    6868    line-height: 1;
    6969}
     
    308308------------------------------------------------------------------------------*/
    309309
    310 
     310/* Select styles are based on the default button in buttons.css */
    311311.wp-admin select {
    312     padding: 2px;
    313     line-height: 2;
    314     height: 28px;
     312    color: #555;
     313    border-color: #7e8993;
     314    box-shadow: none;
     315    border-radius: 3px;
     316    padding: 2px 24px 2px 8px;
     317    min-height: 28px;
    315318    vertical-align: middle;
     319    -webkit-appearance: none;
     320    /* The SVG is arrow-down-alt2 from Dashicons. */
     321    background: #f7f7f7 url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 4px top 50%;
     322    background-size: 16px 16px;
     323}
     324
     325.wp-admin select:hover {
     326    background-color: #f3f5f6;
     327    color: #007cba;
     328}
     329
     330.wp-admin select:focus {
     331    background-color: #f3f5f6;
     332    border-color: #007cba;
     333    color: #016087;
     334    box-shadow: 0 0 0 1px #007cba;
     335}
     336
     337.wp-admin select:active {
     338    background-color: #eee;
     339    border-color: #999;
     340    box-shadow: none;
    316341}
    317342
     
    413438    float: left;
    414439    margin-right: 6px;
    415     max-width: 200px;
     440    max-width: 12.5rem;
    416441}
    417442
    418443.ie8 .tablenav .actions select {
    419     width: 155px;
     444    width: 9.6875rem;
    420445}
    421446
    422447.ie8 .tablenav .actions select#cat {
    423     width: 200px;
     448    width: 12.5rem;
    424449}
    425450
     
    12491274
    12501275    input[type="number"] {
    1251         height: 40px;
     1276        min-height: 40px;
    12521277    }
    12531278
     
    13031328
    13041329    #wpbody select {
    1305         height: 36px;
     1330        min-height: 36px;
    13061331        font-size: 16px;
    13071332    }
     
    13731398
    13741399    #wpbody .form-table td select {
    1375         height: 40px;
     1400        min-height: 40px;
    13761401    }
    13771402
  • trunk/src/wp-includes/css/buttons.css

    r46241 r46243  
    4848    font-size: 13px;
    4949    line-height: 2;
    50     height: 28px;
     50    min-height: 28px;
    5151    margin: 0;
    52     padding: 0 10px 1px;
     52    padding: 0 10px;
    5353    cursor: pointer;
    5454    border-width: 1px;
     
    7272.wp-core-ui .button.button-large,
    7373.wp-core-ui .button-group.button-large .button {
    74     height: 30px;
     74    min-height: 30px;
    7575    line-height: 2.15384615;
    7676    padding: 0 12px 2px;
     
    7979.wp-core-ui .button.button-small,
    8080.wp-core-ui .button-group.button-small .button {
    81     height: 24px;
     81    min-height: 24px;
    8282    line-height: 2;
    8383    padding: 0 8px 1px;
     
    8888.wp-core-ui .button-group.button-hero .button {
    8989    font-size: 14px;
    90     height: 46px;
     90    min-height: 46px;
    9191    line-height: 3.14285714;
    9292    padding: 0 36px;
     
    349349    #media-upload.wp-core-ui .button {
    350350        padding: 0 10px 1px;
    351         height: 24px;
     351        min-height: 24px;
    352352        line-height: 22px;
    353353        font-size: 13px;
     
    370370        font-size: 13px;
    371371        line-height: 2;
    372         height: 28px;
     372        min-height: 28px;
    373373        margin: 0;
    374374        vertical-align: inherit;
     
    383383
    384384    .interim-login .button.button-large {
    385         height: 30px;
     385        min-height: 30px;
    386386        line-height: 2;
    387387        padding: 0 12px 2px;
  • trunk/src/wp-includes/css/media-views.css

    r46237 r46243  
    4242.media-frame select,
    4343.wp-admin .media-frame select {
    44     padding: 2px;
    45     line-height: 2;
    46     height: 28px;
     44    min-height: 28px;
    4745    vertical-align: middle;
    4846}
Note: See TracChangeset for help on using the changeset viewer.