diff options
| -rw-r--r-- | src/wp-admin/css/colors/_admin.scss | 9 | ||||
| -rw-r--r-- | src/wp-admin/css/forms.css | 63 |
2 files changed, 37 insertions, 35 deletions
diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index 4ed668738b..76158af52d 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -2,6 +2,9 @@ @import 'variables'; @import 'mixins'; +@function url-friendly-colour( $color ) { + @return '%23' + str-slice( '#{ $color }', 2, -1 ); +} body { background: $body-background; @@ -30,11 +33,11 @@ div.dashboard-widget-submit input:hover, /* 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; } diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index f51ad1066f..6e1b1deea6 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -79,14 +79,14 @@ input[type="radio"] { 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; @@ -117,36 +117,35 @@ td > input[type="checkbox"], 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="radio"]:checked:before { - content: "\2022"; - text-indent: -9999px; - border-radius: 50px; - font-size: 24px; - width: 6px; - height: 6px; - margin: 4px; +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: ""; + border-radius: 50%; + width: 50%; + height: 50%; + margin: 25%; line-height: 0.76190476; background-color: #1e8cbe; } @@ -1287,7 +1286,6 @@ table.form-table td .updated p { .widefat thead td input[type="checkbox"], .widefat tfoot td input[type="checkbox"] { -webkit-appearance: none; - padding: 10px; } .widefat th input[type="checkbox"], @@ -1300,26 +1298,27 @@ table.form-table td .updated p { .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; } |