Ticket #47498: 47498.3.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

@@ -77 +77 @@
         cursor: pointer;
         display: inline-block;
         line-height: 0;
-        height: 16px;
-        margin: -4px 4px 0 0;
+        height: 1rem;
+        margin: -0.25rem 0.25rem 0 0;
         outline: 0;
         padding: 0 !important;
         text-align: center;
         vertical-align: middle;
-        width: 16px;
-        min-width: 16px;
+        width: 1rem;
+        min-width: 1rem;
         -webkit-appearance: none;
         box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
         transition: .05s border-color ease-in-out;
@@ -115 +115 @@
 
 input[type="radio"] {
         border-radius: 50%;
-        margin-right: 4px;
+        margin-right: 0.25rem;
         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;
+        width: 1rem;
         speak: none;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
 }
 
-input[type="checkbox"]:checked:before {
-        content: "\f147";
-        margin: -3px 0 0 -4px;
-        color: #1e8cbe;
+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: -0.1875rem 0 0 -0.25rem;
+        height: 1.3125rem;
+        width: 1.3125rem;
 }
 
-input[type="radio"]:checked:before {
-        content: "\2022";
-        text-indent: -9999px;
-        border-radius: 50px;
-        font-size: 24px;
-        width: 6px;
-        height: 6px;
-        margin: 4px;
+input[type="radio"]:checked::before {
+        content: "";
+        border-radius: 50%;
+        width: 50%;
+        height: 50%;
+        margin: 25%;
         line-height: 0.76190476;
         background-color: #1e8cbe;
 }
@@ -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;
-                margin: -3px -5px;
+                width: 1.875rem;
+                height: 1.875rem;
+                margin: -0.1875rem -0.3125rem;
         }
 
         input[type="radio"],
         input[type="checkbox"] {
-                height: 25px;
-                width: 25px;
+                height: 1.5625rem;
+                width: 1.5625rem;
         }
 
         .wp-admin p input[type="checkbox"],
         .wp-admin p input[type="radio"] {
-                margin-top: -3px;
+                margin-top: -0.1875rem;
         }
 
         input[type="radio"]:checked:before {
                 vertical-align: middle;
-                width: 9px;
-                height: 9px;
-                margin: 7px;
+                width: 0.5625rem;
+                height: 0.5625rem;
+                margin: 0.4375rem;
                 line-height: 0.76190476;
         }