Ticket #47498: 47498-url-encoded.diff

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

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

src/wp-admin/css/forms.css

@@ -119 +119 @@
         line-height: 0.71428571;
 }
 
-input[type="checkbox"]:checked:before,
-input[type="radio"]:checked:before {
+input[type="checkbox"]:checked::before,
+input[type="radio"]:checked::before {
         float: left;
         display: inline-block;
         vertical-align: middle;
         width: 16px;
-        font: normal 21px/1 dashicons;
         speak: none;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
 }
 
-input[type="checkbox"]:checked:before {
-        content: "\f147";
+input[type="checkbox"]:checked::before {
+        /* Use the "Yes" SVG Dashicon */
+        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");
         margin: -3px 0 0 -4px;
-        color: #1e8cbe;
+        height: 21px;
+        width: 21px;
 }
 
-input[type="radio"]:checked:before {
-        content: "\2022";
-        text-indent: -9999px;
-        border-radius: 50px;
-        font-size: 24px;
+input[type="radio"]:checked::before {
+        content: "";
+        border-radius: 50%;
         width: 6px;
         height: 6px;
         margin: 4px;
@@ -1274 +1273 @@
         .widefat th input[type="checkbox"]:before,
         .widefat thead td input[type="checkbox"]:before,
         .widefat tfoot td input[type="checkbox"]:before {
-                font: normal 30px/1 dashicons;
+                width: 30px;
+                height: 30px;
                 margin: -3px -5px;
         }