Accessibility: Improve and modernize user interface controls: Make the secondary buttons border blue.

Props drw158, youknowriad, kjellr, melchoyce, talldanwp, audrasjb.
See #34904.


git-svn-id: https://develop.svn.wordpress.org/trunk@46344 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2019-09-29 21:52:38 +00:00
parent 47643f7621
commit ef206a787f
5 changed files with 44 additions and 22 deletions

View File

@ -23,10 +23,11 @@ a {
}
}
#media-upload a.del-link:hover,
div.dashboard-widget-submit input:hover,
.subsubsub a:hover,
.subsubsub a.current:hover {
#post-body .misc-pub-post-status:before,
#post-body #visibility:before,
.curtime #timestamp:before,
#post-body .misc-pub-revisions:before,
span.wp-media-buttons-icon:before {
color: $link-focus;
}
@ -73,6 +74,23 @@ textarea:focus {
/* Core UI */
.wp-core-ui {
.button,
.button-secondary {
color: $button-color;
border-color: $button-color;
}
.button.hover,
.button:hover,
.button-secondary:hover,
.button.focus,
.button:focus,
.button-secondary:focus {
border-color: darken( $button-color, 5% );
color: darken( $button-color, 5% );
}
.button.focus,
.button:focus,
.button-secondary:focus {
@ -85,6 +103,10 @@ textarea:focus {
@include button( $button-color );
}
.button-group > .button.active {
border-color: $button-color;
}
.wp-ui-primary {
color: $text-color;
background-color: $base-color;

View File

@ -617,13 +617,14 @@ code {
position: relative;
top: -3px;
text-decoration: none;
border: 1px solid #7e8993;
border: 1px solid #0071a1;
border-radius: 2px;
text-shadow: none;
font-weight: 600;
font-size: 13px;
line-height: normal; /* IE8-IE11 need this for buttons */
color: #555; /* use the standard color used for buttons */
color: #0071a1; /* use the standard color used for buttons */
background: #f3f5f6;
cursor: pointer;
}
@ -633,9 +634,9 @@ code {
.wrap .add-new-h2:hover, /* deprecated */
.wrap .page-title-action:hover {
background: #f3f5f6;
border-color: #7e8993;
color: #007cba;
background: #f1f1f1;
border-color: #016087;
color: #016087;
}
/* lower specificity: color needs to be overridden by :hover and :active */

View File

@ -448,8 +448,7 @@ form#tags-filter {
#post-body .misc-pub-post-status:before,
#post-body #visibility:before,
.curtime #timestamp:before,
#post-body .misc-pub-revisions:before,
span.wp-media-buttons-icon:before {
#post-body .misc-pub-revisions:before {
color: #82878c;
}

View File

@ -931,7 +931,6 @@ border color while dragging a file over the uploader drop area */
line-height: 2;
margin: 0 8px 8px 0;
padding: 0 10px;
color: #555;
}
.imgedit-menu .button:before {

View File

@ -123,9 +123,9 @@ TABLE OF CONTENTS:
.wp-core-ui .button,
.wp-core-ui .button-secondary {
color: #555;
border-color: #7e8993;
background: #f1f1f1;
color: #0071a1;
border-color: #0071a1;
background: #f3f5f6;
vertical-align: top;
}
@ -139,9 +139,9 @@ TABLE OF CONTENTS:
.wp-core-ui .button.focus,
.wp-core-ui .button:focus,
.wp-core-ui .button-secondary:focus {
background: #f3f5f6;
border-color: #7e8993;
color: #007cba;
background: #f1f1f1;
border-color: #016087;
color: #016087;
}
.wp-core-ui .button.focus,
@ -157,15 +157,15 @@ TABLE OF CONTENTS:
.wp-core-ui .button.active:hover,
.wp-core-ui .button:active,
.wp-core-ui .button-secondary:active {
background: #eee;
border-color: #999;
background: #f3f5f6;
border-color: #7e8993;
transform: translateY(1px);
box-shadow: none;
}
.wp-core-ui .button.active:focus {
border-color: #999;
box-shadow: 0 0 0 1px #999;
border-color: #7e8993;
box-shadow: 0 0 0 1px #7e8993;
}
.wp-core-ui .button[disabled],
@ -319,6 +319,7 @@ TABLE OF CONTENTS:
.wp-core-ui .button-group > .button.active {
background-color: #e2e4e7;
box-shadow: inset 0 1px 0 0 #999;
border-color: #016087;
}
.wp-core-ui .button-group > .button:active,