WordPress.org

Make WordPress Core


Ignore:
Timestamp:
09/23/2019 04:50:17 PM (8 weeks 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.

File:
1 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}
Note: See TracChangeset for help on using the changeset viewer.