Better focus styles for form elements in the admin. These are purposefully not keyed to admin color schemes, as different colors could communicate a state like an error as opposed to focus. props celloexpressions. fixes #27173.

Built from https://develop.svn.wordpress.org/trunk@27741


git-svn-id: http://core.svn.wordpress.org/trunk@27578 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí 2014-03-26 16:06:16 +00:00
parent bd4bce1b65
commit 457b47d229
6 changed files with 18 additions and 18 deletions

View File

@ -35,6 +35,8 @@ input[type="radio"] {
box-sizing: border-box; box-sizing: border-box;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-transition: .05s border-color ease-in-out;
transition: .05s border-color ease-in-out;
} }
input[type="radio"]:checked + label:before { input[type="radio"]:checked + label:before {
@ -214,16 +216,14 @@ select {
box-shadow: inset 0 1px 2px rgba(0,0,0,0.07); box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
background-color: #fff; background-color: #fff;
color: #333; color: #333;
-webkit-transition: .05s border-color ease-in-out;
transition: .05s border-color ease-in-out;
} }
select[disabled] { select[disabled] {
color: #7f7f7f; color: #7f7f7f;
} }
select:focus {
border-color: #aaa;
}
textarea:focus, textarea:focus,
input[type="text"]:focus, input[type="text"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
@ -235,9 +235,9 @@ input[type="url"]:focus,
input[type="checkbox"]:focus, input[type="checkbox"]:focus,
input[type="radio"]:focus, input[type="radio"]:focus,
select:focus { select:focus {
border-color: #999; border-color: #5b9dd9;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1); -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
box-shadow: 0 1px 2px rgba(0,0,0,0.1); box-shadow: 0 0 2px rgba(30,140,190,0.8);
} }
input[readonly] { input[readonly] {

View File

@ -35,6 +35,8 @@ input[type="radio"] {
box-sizing: border-box; box-sizing: border-box;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-transition: .05s border-color ease-in-out;
transition: .05s border-color ease-in-out;
} }
input[type="radio"]:checked + label:before { input[type="radio"]:checked + label:before {
@ -214,16 +216,14 @@ select {
box-shadow: inset 0 1px 2px rgba(0,0,0,0.07); box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
background-color: #fff; background-color: #fff;
color: #333; color: #333;
-webkit-transition: .05s border-color ease-in-out;
transition: .05s border-color ease-in-out;
} }
select[disabled] { select[disabled] {
color: #7f7f7f; color: #7f7f7f;
} }
select:focus {
border-color: #aaa;
}
textarea:focus, textarea:focus,
input[type="text"]:focus, input[type="text"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
@ -235,9 +235,9 @@ input[type="url"]:focus,
input[type="checkbox"]:focus, input[type="checkbox"]:focus,
input[type="radio"]:focus, input[type="radio"]:focus,
select:focus { select:focus {
border-color: #999; border-color: #5b9dd9;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1); -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
box-shadow: 0 1px 2px rgba(0,0,0,0.1); box-shadow: 0 0 2px rgba(30,140,190,0.8);
} }
input[readonly] { input[readonly] {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long