WordPress.org
Get WordPress

Make WordPress Core

Changeset 46866


Ignore:
Timestamp:
12/09/2019 08:24:17 PM (5 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.