WordPress.org

Make WordPress Core

Changeset 46248


Ignore:
Timestamp:
09/23/2019 04:50:17 PM (3 months ago)
Author:
afercia
Message:

Accessibility: Improve and modernize user interface controls. Sixth part: allow checkboxes and radio buttons to scale with text.

  • uses a SVG icon for checkboxes
  • uses CSS rem relative units

Props kjellr, afercia, audrasjb.
Fixes #47498.

Location:
trunk/src/wp-admin/css
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/colors/_admin.scss

    r46241 r46248  
    33@import 'mixins';
    44
     5@function url-friendly-colour( $color ) {
     6    @return '%23' + str-slice( '#{ $color }', 2, -1 );
     7}
    58
    69body {
     
    3134/* Forms */
    3235
    33 input[type=checkbox]:checked:before {
    34     color: $form-checked;
    35 }
    36 
    37 input[type=radio]:checked:before {
     36input[type=checkbox]:checked::before {
     37    content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour($form-checked)}%27%2F%3E%3C%2Fsvg%3E");
     38}
     39
     40input[type=radio]:checked::before {
    3841    background: $form-checked;
    3942}
  • trunk/src/wp-admin/css/forms.css

    r46247 r46248  
    8080    display: inline-block;
    8181    line-height: 0;
    82     height: 16px;
    83     margin: -4px 4px 0 0;
     82    height: 1rem;
     83    margin: -0.25rem 0.25rem 0 0;
    8484    outline: 0;
    8585    padding: 0 !important;
    8686    text-align: center;
    8787    vertical-align: middle;
    88     width: 16px;
    89     min-width: 16px;
     88    width: 1rem;
     89    min-width: 1rem;
    9090    -webkit-appearance: none;
    9191    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
     
    118118input[type="radio"] {
    119119    border-radius: 50%;
    120     margin-right: 4px;
     120    margin-right: 0.25rem;
    121121    line-height: 0.71428571;
    122122}
    123123
    124 input[type="checkbox"]:checked:before,
    125 input[type="radio"]:checked:before {
     124input[type="checkbox"]:checked::before,
     125input[type="radio"]:checked::before {
    126126    float: left;
    127127    display: inline-block;
    128128    vertical-align: middle;
    129     width: 16px;
    130     font: normal 21px/1 dashicons;
     129    width: 1rem;
    131130    speak: none;
    132131    -webkit-font-smoothing: antialiased;
     
    134133}
    135134
    136 input[type="checkbox"]:checked:before {
    137     content: "\f147";
    138     margin: -3px 0 0 -4px;
    139     color: #1e8cbe;
    140 }
    141 
    142 input[type="radio"]:checked:before {
    143     content: "\2022";
    144     text-indent: -9999px;
    145     border-radius: 50px;
    146     font-size: 24px;
    147     width: 6px;
    148     height: 6px;
    149     margin: 4px;
     135input[type="checkbox"]:checked::before {
     136    /* Use the "Yes" SVG Dashicon */
     137    content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%231e8cbe%27%2F%3E%3C%2Fsvg%3E");
     138    margin: -0.1875rem 0 0 -0.25rem;
     139    height: 1.3125rem;
     140    width: 1.3125rem;
     141}
     142
     143input[type="radio"]:checked::before {
     144    content: "";
     145    border-radius: 50%;
     146    width: 50%;
     147    height: 50%;
     148    margin: 25%;
    150149    line-height: 0.76190476;
    151150    background-color: #1e8cbe;
     
    12881287    .widefat tfoot td input[type="checkbox"] {
    12891288        -webkit-appearance: none;
    1290         padding: 10px;
    12911289    }
    12921290
     
    13011299    .widefat thead td input[type="checkbox"]:before,
    13021300    .widefat tfoot td input[type="checkbox"]:before {
    1303         font: normal 30px/1 dashicons;
    1304         margin: -3px -5px;
     1301        width: 1.875rem;
     1302        height: 1.875rem;
     1303        margin: -0.1875rem -0.3125rem;
    13051304    }
    13061305
    13071306    input[type="radio"],
    13081307    input[type="checkbox"] {
    1309         height: 25px;
    1310         width: 25px;
     1308        height: 1.5625rem;
     1309        width: 1.5625rem;
    13111310    }
    13121311
    13131312    .wp-admin p input[type="checkbox"],
    13141313    .wp-admin p input[type="radio"] {
    1315         margin-top: -3px;
     1314        margin-top: -0.1875rem;
    13161315    }
    13171316
    13181317    input[type="radio"]:checked:before {
    13191318        vertical-align: middle;
    1320         width: 9px;
    1321         height: 9px;
    1322         margin: 7px;
     1319        width: 0.5625rem;
     1320        height: 0.5625rem;
     1321        margin: 0.4375rem;
    13231322        line-height: 0.76190476;
    13241323    }
Note: See TracChangeset for help on using the changeset viewer.