WordPress.org
Get WordPress

Make WordPress Core

Changeset 46866 for trunk


Ignore:
Timestamp:
12/09/2019 08:24:17 PM (7 years ago)
Author:
SergeyBiryukov
Message:

Administration: Standardize form control height and alignment across the admin.

This improves the appearance of various form controls in the admin and addresses some visual inconsistencies in WordPress 5.3.

Props afercia, audrasjb, jameskoster, GDragoN, azaozz, michaelarestad, murgroland, SamuelFernandez, chetan200891, veminom, dlh.
Fixes #48420.

Location:
trunk/src
Files:
9 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/color-picker.css

    r46559 r46866  
    1111/* Needs higher specificiity. */
    1212.wp-picker-container .wp-color-result.button {
    13         min-height: 28px;
     13        min-height: 30px;
    1414        margin: 0 6px 6px 0px;
    1515        padding: 0 0 0 30px;
    … …  
    2323        color: #555;
    2424        display: block;
    25         line-height: 2.36363636; /* 26px */
     25        line-height: 2.54545455; /* 28px */
    2626        padding: 0 6px;
    2727        text-align: center;
    … …  
    7474.wp-customizer .wp-picker-input-wrap .button.wp-picker-default {
    7575        margin-left: 6px;
    76         padding: 2px 8px;
     76        padding: 0 8px;
     77        line-height: 2.54545455; /* 28px */
     78        min-height: 30px;
    7779}
    7880
    … …  
    8890
    8991.wp-picker-container input[type="text"].wp-color-picker {
    90         width: 65px;
     92        width: 4rem;
    9193        font-size: 12px;
    9294        font-family: monospace;
    93         line-height: 1.33333333; /* 16px */
     95        line-height: 2.33333333; /* 28px */
    9496        margin: 0;
    95         padding: 5px;
     97        padding: 0 5px;
    9698        vertical-align: top;
    97         min-height: 28px;
     99        min-height: 30px;
    98100}
    99101
    … …  
    133135@media screen and (max-width: 782px) {
    134136        .wp-picker-container input[type="text"].wp-color-picker {
    135                 width: 80px;
    136                 padding: 6px 5px 5px;
     137                width: 5rem;
    137138                font-size: 16px;
    138                 line-height: 1.15;
     139                line-height: 1.875; /* 30px */
     140                min-height: 32px;
    139141        }
    140142
    141143        .wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
    142                 padding: 5px 5px 4px;
     144                padding: 0 5px;
     145        }
     146
     147        .wp-picker-input-wrap .button.wp-picker-default {
     148                padding: 0 8px;
     149                line-height: 2.14285714; /* 30px */
     150                min-height: 32px;
     151        }
     152
     153        .wp-customizer .wp-picker-input-wrap .button.wp-picker-default {
     154                padding: 0 8px;
     155                font-size: 14px;
     156                line-height: 2.14285714; /* 30px */
     157                min-height: 32px;
    143158        }
    144159
    145160        .wp-picker-container .wp-color-result.button {
    146                 height: auto;
    147161                padding: 0 0 0 40px;
    148162                font-size: 14px;
    149                 line-height: 2.1;
     163                line-height: 2.14285714; /* 30px */
    150164        }
    151165
    152166        .wp-customizer .wp-picker-container .wp-color-result.button {
    153                 font-size: 13px;
    154                 line-height: 2;
     167                font-size: 14px;
     168                line-height: 2.14285714; /* 30px */
    155169        }
    156170
    … …  
    165179        }
    166180}
    167 
    168 @media screen and (max-width: 640px) {
    169         .wp-customizer .wp-picker-container .wp-color-result.button {
    170                 font-size: 14px;
    171                 line-height: 2.1;
    172         }
    173 
    174         .wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
    175                 padding: 6px 5px;
    176         }
    177 }

  • trunk/src/wp-admin/css/common.css

    r46559 r46866  
    925925#delete-action {
    926926        float: left;
    927         line-height: 2.1;
     927        line-height: 2.30769231; /* 30px */
    928928}
    929929
    930930#delete-link {
    931         line-height: 2.1;
     931        line-height: 2.30769231; /* 30px */
    932932        vertical-align: middle;
    933933        text-align: left;
    … …  
    946946
    947947#publishing-action .spinner {
    948         float: left;
     948        float: none;
     949        margin-top: 5px;
    949950}
    950951
    … …  
    10871088
    10881089.wp-filter .search-form input[type="search"] {
    1089         margin: 0;
     1090        margin: 1px 0;
    10901091        width: 280px;
    10911092        max-width: 100%;
    1092         font-size: inherit;
    1093         /* inherits font size 13px */
    1094         line-height: 2.15384615; /* 28px */
    10951093}
    10961094

  • trunk/src/wp-admin/css/customize-controls.css

    r46559 r46866  
    160160        transform: none;
    161161        margin-top: 0;
     162        line-height: 2;
    162163}
    163164
    … …  
    913914}
    914915
    915 .customize-control select,
    916 .customize-control input[type="radio"],
    917 .customize-control input[type="checkbox"] {
    918         line-height: 2;
    919 }
    920 
    921916.customize-control input[type="text"],
    922917.customize-control input[type="password"],
    … …  
    941936.customize-control select {
    942937        width: 100%;
    943         height: 28px;
    944         line-height: 2;
    945938}
    946939
    … …  
    28722865
    28732866        .wp-core-ui.wp-customizer .button {
    2874                 padding: 6px 14px;
    2875                 line-height: normal;
     2867                min-height: 30px;
     2868                padding: 0 14px;
     2869                line-height: 2;
    28762870                font-size: 14px;
    28772871                vertical-align: middle;
    2878                 height: auto;
    2879         }
    2880 
    2881         #publish-settings {
    2882                 height: 31px;
    28832872        }
    28842873

  • trunk/src/wp-admin/css/forms.css

    r46559 r46866  
    2929input,
    3030select {
    31         margin: 1px;
     31        margin: 0 1px;
    3232}
    3333
    … …  
    309309
    310310/* Select styles are based on the default button in buttons.css */
    311 .wp-admin select {
    312         font-size: 13px;
    313         line-height: 1.38461538; /* 18px */
     311.wp-core-ui select {
     312        font-size: 14px;
     313        line-height: 2; /* 28px */
    314314        color: #32373c;
    315315        border-color: #7e8993;
    316316        box-shadow: none;
    317317        border-radius: 3px;
    318         padding: 3px 24px 3px 8px;
    319         min-height: 28px;
     318        padding: 0 24px 0 8px;
     319        min-height: 30px;
    320320        max-width: 25rem;
    321         vertical-align: middle;
    322321        -webkit-appearance: none;
    323322        /* The SVG is arrow-down-alt2 from Dashicons. */
    … …  
    325324        background-size: 16px 16px;
    326325        cursor: pointer;
    327 }
    328 
    329 /* Color and font size in the core form tables. */
    330 .wp-admin .form-table select {
    331         font-size: 14px;
    332         line-height: 1.28571428; /* 18px */
    333         color: #32373c;
    334 }
    335 
    336 .wp-admin select:hover {
     326        vertical-align: middle;
     327}e
     328
     329.wp-core-ui select:hover {
    337330        color: #007cba;
    338331}
    339332
    340 .wp-admin select:focus {
     333.wp-core-ui select:focus {
    341334        border-color: #007cba;
    342335        color: #016087;
    … …  
    344337}
    345338
    346 .wp-admin select:active {
     339.wp-core-ui select:active {
    347340        border-color: #999;
    348341        box-shadow: none;
    349342}
    350343
    351 .wp-admin select.disabled,
    352 .wp-admin select:disabled {
     344.wp-core-ui select.disabled,
     345.wp-core-ui select:disabled {
    353346        color: #a0a5aa;
    354347        border-color: #ddd;
    … …  
    364357/* Reset Firefox inner outline that appears on :focus. */
    365358/* This ruleset overrides the color change on :focus thus needs to be after select:focus. */
    366 .wp-admin select:-moz-focusring {
     359.wp-core-ui select:-moz-focusring {
    367360        color: transparent;
    368361        text-shadow: 0 0 0 #016087;
    … …  
    370363
    371364/* Remove background focus style from IE11 while keeping focus style available on option elements. */
    372 .wp-admin select::-ms-value {
     365.wp-core-ui select::-ms-value {
    373366        background: transparent;
    374367        color: #555;
    375368}
    376369
    377 .wp-admin select:hover::-ms-value {
     370.wp-core-ui select:hover::-ms-value {
    378371        color: #007cba;
    379372}
    380373
    381 .wp-admin select:focus::-ms-value {
     374.wp-core-ui select:focus::-ms-value {
    382375        color: #016087;
    383376}
    384377
    385 .wp-admin select.disabled::-ms-value,
    386 .wp-admin select:disabled::-ms-value {
     378.wp-core-ui select.disabled::-ms-value,
     379.wp-core-ui select:disabled::-ms-value {
    387380        color: #a0a5aa;
    388381}
    389382
    390383/* Hide the native down arrow for select element on IE. */
    391 .wp-admin select::-ms-expand {
     384.wp-core-ui select::-ms-expand {
    392385        display: none;
    393386}
    … …  
    408401}
    409402
    410 .wp-admin select[multiple] {
     403.wp-core-ui select[multiple] {
    411404        height: auto;
    412405        padding-right: 8px;
    … …  
    485478#doaction2,
    486479#post-query-submit {
    487         margin: 1px 8px 0 0;
    488 }
    489 
    490 .tablenav #changeit,
    491 .tablenav #delete_all,
    492 .tablenav #clear-recent-list,
    493 .wp-filter #delete_all {
    494         margin-top: 1px;
     480        margin: 0 8px 0 0;
    495481}
    496482
    … …  
    509495        position: relative;
    510496        top: 3px;
     497        width: 1.25rem;
     498        height: 1.25rem;
     499        top: 0.25rem;
     500        font-size: 20px;
    511501}
    512502
    … …  
    602592        margin-bottom: 0;
    603593        /* Same height as the buttons */
    604         line-height: 20px;
    605         min-height: 28px;
    606         max-height: 40px;
     594        min-height: 30px;
     595}
     596
     597/* Hide the Edge "reveal password" native button */
     598.wp-pwd input::-ms-reveal {
     599        display: none;
    607600}
    608601
    … …  
    13261319                -webkit-appearance: none;
    13271320                padding: 3px 10px;
     1321                /* Only necessary for IE11 */
     1322                min-height: 40px;
    13281323        }
    13291324
    … …  
    13771372        }
    13781373
    1379         .wp-admin select,
     1374        .wp-core-ui select,
    13801375        .wp-admin .form-table select {
    13811376                min-height: 40px;
    … …  
    15271522        }
    15281523
     1524        .background-position-control .button-group > label {
     1525                font-size: 0;
     1526        }
     1527
    15291528        .form-table fieldset label {
    15301529                display: block;
    … …  
    15621561                right: 0;
    15631562                top: 0;
     1563                width: 2.375rem;
     1564                height: 2.375rem;
     1565                min-width: 40px;
     1566                min-height: 40px;
    15641567        }
    15651568
    15661569        .wp-pwd button.wp-hide-pw {
    1567                 right: 40px;
     1570                right: 2.5rem;
    15681571        }
    15691572
    … …  
    15861589        .wp-pwd [type="password"] {
    15871590                line-height: 2;
     1591                padding-right: 5rem;
    15881592        }
    15891593

  • trunk/src/wp-admin/css/list-tables.css

    r46845 r46866  
    639639        height: 30px;
    640640        margin: 6px 0 4px;
     641        padding-top: 5px;
    641642        vertical-align: middle;
    642643}
    … …  
    648649.tablenav .tablenav-pages {
    649650        float: right;
    650         margin: 3px 0 9px;
     651        margin: 0 0 9px;
    651652}
    652653
    … …  
    660661        display: inline-block;
    661662        vertical-align: baseline;
    662         min-width: 28px;
    663         min-height: 28px;
     663        min-width: 30px;
     664        min-height: 30px;
    664665        margin: 0;
    665666        padding: 0 4px;
    666667        font-size: 16px;
    667         line-height: 1.5;
     668        line-height: 1.625; /* 26px */
    668669        text-align: center;
    669670}
    … …  
    679680
    680681.tablenav .actions {
    681         overflow: hidden;
    682         padding: 2px 8px 0 0;
     682        padding: 0 8px 0 0;
    683683}
    684684
    … …  
    10351035.inline-edit-row fieldset input[name=mn],
    10361036.inline-edit-row fieldset input[name=aa] {
    1037         font-size: 12px;
    1038         line-height: 1.16666666;
    10391037        vertical-align: middle;
    10401038        text-align: center;
    1041         padding: 6px 4px;
     1039        padding: 0 4px;
    10421040}
    10431041
    … …  
    19531951        }
    19541952
     1953        .inline-edit-row fieldset input[name=jj],
     1954        .inline-edit-row fieldset input[name=hh],
     1955        .inline-edit-row fieldset input[name=mn],
     1956        .inline-edit-row fieldset input[name=aa] {
     1957                font-size: 16px;
     1958                line-height: 2;
     1959                padding: 3px 4px;
     1960        }
     1961
    19551962        .inline-edit-row fieldset ul.cat-checklist label,
    19561963        .inline-edit-row #bulk-titles div {

  • trunk/src/wp-admin/css/themes.css

    r46444 r46866  
    3535        margin: 0;
    3636        width: 280px;
    37         font-size: inherit;
    3837}
    3938

  • trunk/src/wp-includes/css/buttons.css

    r46559 r46866  
    4747        text-decoration: none;
    4848        font-size: 13px;
    49         line-height: 2;
    50         min-height: 28px;
     49        line-height: 2.15384615; /* 28px */
     50        min-height: 30px;
    5151        margin: 0;
    5252        padding: 0 10px;
    … …  
    7272.wp-core-ui .button.button-large,
    7373.wp-core-ui .button-group.button-large .button {
    74         min-height: 30px;
    75         line-height: 2.15384615;
    76         padding: 0 12px 2px;
     74        min-height: 32px;
     75        line-height: 2.30769231; /* 30px */
     76        padding: 0 12px;
    7777}
    7878
    7979.wp-core-ui .button.button-small,
    8080.wp-core-ui .button-group.button-small .button {
    81         min-height: 24px;
    82         line-height: 2;
     81        min-height: 26px;
     82        line-height: 2.18181818; /* 24px */
    8383        padding: 0 8px;
    8484        font-size: 11px;
    … …  
    350350        input#save-post,
    351351        a.preview {
    352                 padding: 1px 14px;
    353                 line-height: 2;
     352                padding: 0 14px;
     353                line-height: 2.71428571; /* 38px */
    354354                font-size: 14px;
    355355                vertical-align: middle;
    356                 height: auto;
     356                min-height: 40px;
    357357                margin-bottom: 4px;
    358358        }
    … …  
    378378
    379379        .wp-core-ui.wp-customizer .button {
    380                 padding: 0 10px 1px;
    381380                font-size: 13px;
    382                 line-height: 2;
    383                 min-height: 28px;
     381                line-height: 2.15384615; /* 28px */
     382                min-height: 30px;
    384383                margin: 0;
    385384                vertical-align: inherit;

  • trunk/src/wp-includes/css/editor.css

    r46559 r46866  
    12021202.wp-media-buttons span.wp-media-buttons-icon {
    12031203        display: inline-block;
    1204         width: 18px;
    1205         height: 18px;
    1206         vertical-align: text-top;
     1204        width: 20px;
     1205        height: 20px;
     1206        line-height: 1;
     1207        vertical-align: middle;
    12071208        margin: 0 2px;
    12081209}
    … …  
    17771778        padding: 3px;
    17781779        box-sizing: border-box;
    1779         line-height: 1.28571429;
     1780        line-height: 1.28571429; /* 18px */
     1781        /* Override value inherited from default input fields. */
     1782        min-height: 26px;
    17801783}
    17811784

  • trunk/src/wp-includes/css/media-views.css

    r46567 r46866  
    7474.media-frame select,
    7575.wp-admin .media-frame select {
    76         min-height: 28px;
     76        min-height: 30px;
    7777        vertical-align: middle;
    7878}
    … …  
    121121}
    122122
     123/* Search field in the Media Library toolbar */
     124.media-frame.mode-grid .wp-filter input[type="search"] {
     125        font-size: 14px;
     126        line-height: 2;
     127}
     128
    123129.media-frame input[type="text"]:focus,
    124130.media-frame input[type="password"]:focus,
Note: See TracChangeset for help on using the changeset viewer.