sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Accessibility: Improve and modernize user interface controls. Sixth part: allow checkboxes and radio buttons to scale with text.

Browse Source 
- uses a SVG icon for checkboxes
- uses CSS `rem` relative units

Props kjellr, afercia, audrasjb.
Fixes #47498.


git-svn-id: https://develop.svn.wordpress.org/trunk@46248 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2019-09-23 16:50:17 +00:00
parent e994411a99
commit e3db9a1361
2 changed files with 35 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/wp-admin/css/colors/_admin.scss
View File

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

59
src/wp-admin/css/forms.css
View File

@ -79,14 +79,14 @@ input[type="radio"] {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
line-height: 0; line-height: 0;
height: 16px; height: 1rem;
margin: -4px 4px 0 0; margin: -0.25rem 0.25rem 0 0;
outline: 0; outline: 0;
padding: 0 !important; padding: 0 !important;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
width: 16px; width: 1rem;
min-width: 16px; min-width: 1rem;
-webkit-appearance: none; -webkit-appearance: none;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
transition: .05s border-color ease-in-out; transition: .05s border-color ease-in-out;
@ -117,36 +117,35 @@ td > input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
border-radius: 50%; border-radius: 50%;
margin-right: 4px; margin-right: 0.25rem;
line-height: 0.71428571; line-height: 0.71428571;
} }
input[type="checkbox"]:checked:before, input[type="checkbox"]:checked::before,
input[type="radio"]:checked:before { input[type="radio"]:checked::before {
float: left; float: left;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: 16px; width: 1rem;
font: normal 21px/1 dashicons;
speak: none; speak: none;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
input[type="checkbox"]:checked:before { input[type="checkbox"]:checked::before {
content: "\f147"; /* Use the "Yes" SVG Dashicon */
margin: -3px 0 0 -4px; 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");
color: #1e8cbe; margin: -0.1875rem 0 0 -0.25rem;
height: 1.3125rem;
width: 1.3125rem;
} }
input[type="radio"]:checked:before { input[type="radio"]:checked::before {
content: "\2022"; content: "";
text-indent: -9999px; border-radius: 50%;
border-radius: 50px; width: 50%;
font-size: 24px; height: 50%;
width: 6px; margin: 25%;
height: 6px;
margin: 4px;
line-height: 0.76190476; line-height: 0.76190476;
background-color: #1e8cbe; background-color: #1e8cbe;
} }
@ -1287,7 +1286,6 @@ table.form-table td .updated p {
.widefat thead td input[type="checkbox"], .widefat thead td input[type="checkbox"],
.widefat tfoot td input[type="checkbox"] { .widefat tfoot td input[type="checkbox"] {
-webkit-appearance: none; -webkit-appearance: none;
padding: 10px;
} }
.widefat th input[type="checkbox"], .widefat th input[type="checkbox"],
@ -1300,26 +1298,27 @@ table.form-table td .updated p {
.widefat th input[type="checkbox"]:before, .widefat th input[type="checkbox"]:before,
.widefat thead td input[type="checkbox"]:before, .widefat thead td input[type="checkbox"]:before,
.widefat tfoot td input[type="checkbox"]:before { .widefat tfoot td input[type="checkbox"]:before {
font: normal 30px/1 dashicons; width: 1.875rem;
margin: -3px -5px; height: 1.875rem;
margin: -0.1875rem -0.3125rem;
} }
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
height: 25px; height: 1.5625rem;
width: 25px; width: 1.5625rem;
} }
.wp-admin p input[type="checkbox"], .wp-admin p input[type="checkbox"],
.wp-admin p input[type="radio"] { .wp-admin p input[type="radio"] {
margin-top: -3px; margin-top: -0.1875rem;
} }
input[type="radio"]:checked:before { input[type="radio"]:checked:before {
vertical-align: middle; vertical-align: middle;
width: 9px; width: 0.5625rem;
height: 9px; height: 0.5625rem;
margin: 7px; margin: 0.4375rem;
line-height: 0.76190476; line-height: 0.76190476;
} }