Changeset 46248 for trunk/src/wp-admin/css/colors/_admin.scss

Timestamp:

09/23/2019 04:50:17 PM (5 years 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:

• trunk/src/wp-admin/css/colors/_admin.scss (modified) (2 diffs)

trunk/src/wp-admin/css/colors/_admin.scss

@@ -3 +3 @@
 @import 'mixins';
 
+@function url-friendly-colour( $color ) {
+    @return '%23' + str-slice( '#{ $color }', 2, -1 );
+}
 
 body {
@@ -31 +34 @@
 /* Forms */
 
-input[type=checkbox]:checked:before {
-    color: $form-checked;
-}
-
-input[type=radio]:checked:before {
+input[type=checkbox]:checked::before {
+    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");
+}
+
+input[type=radio]:checked::before {
     background: $form-checked;
 }