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

Accessibility: Administration: Apply a unified design to all secondary buttons across all color schemes.

Browse Source 
This ensures that secondary buttons have an appropriate color contrast in the alternative color schemes.

Props melchoyce, ryelle, audrasjb, ate-up-with-motor, afercia, sabernhardt.
Fixes #48585.

git-svn-id: https://develop.svn.wordpress.org/trunk@46815 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Sergey Biryukov 2019-12-05 21:30:58 +00:00
parent eb4b070009
commit 94b37d4f90
3 changed files with 19 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,41 +75,36 @@ textarea:focus {
.wp-core-ui { .wp-core-ui {
.button, .button {
.button-secondary { border-color: #7e8993;
color: $button-color; color: #32373c;
border-color: $button-color;
} }
.button.hover, .button.hover,
.button:hover, .button:hover,
.button-secondary:hover,
.button.focus, .button.focus,
.button:focus, .button:focus {
.button-secondary:focus { border-color: darken( #7e8993, 5% );
border-color: darken( $button-color, 5% ); color: darken( #32373c, 5% );
color: darken( $button-color, 5% );
} }
.button.focus, .button.focus,
.button:focus, .button:focus {
.button-secondary:focus { border-color: $highlight-color;
border-color: $button-color; box-shadow: 0 0 0 1px $highlight-color;
color: darken( $button-color, 5% );
box-shadow: 0 0 0 1px $button-color;
} }
.button:active { .button:active {
background: darken( $button-color, 5% ); border-color: #7e8993;
border-color: darken( $button-color, 5% ); color: darken( #32373c, 5% );
box-shadow: none;
} }
.button.active, .button.active,
.button.active:focus, .button.active:focus,
.button.active:hover { .button.active:hover {
border-color: darken( $button-color, 5% ); border-color: darken( $button-color, 5% );
color: darken( $button-color, 5% ); color: darken( $button-text-color, 5% );
box-shadow: inset 0 2px 5px -3px darken( $button-color, 5% );
} }
.button-primary { .button-primary {

8
src/wp-admin/css/colors/_mixins.scss
View File

@ -5,13 +5,13 @@
@mixin button( $button-color, $text-color: #fff ) { @mixin button( $button-color, $text-color: #fff ) {
background: $button-color; background: $button-color;
border-color: $button-color; border-color: $button-color;
color: $text-color; color: $button-text-color;
&:hover, &:hover,
&:focus { &:focus {
background: lighten( $button-color, 3% ); background: lighten( $button-color, 3% );
border-color: darken( $button-color, 3% ); border-color: darken( $button-color, 3% );
color: $text-color; color: $button-text-color;
} }
&:focus { &:focus {
@ -23,14 +23,14 @@
&:active { &:active {
background: darken( $button-color, 5% ); background: darken( $button-color, 5% );
border-color: darken( $button-color, 5% ); border-color: darken( $button-color, 5% );
color: $text-color; color: $button-text-color;
} }
&.active, &.active,
&.active:focus, &.active:focus,
&.active:hover { &.active:hover {
background: $button-color; background: $button-color;
color: $text-color; color: $button-text-color;
border-color: darken( $button-color, 15% ); border-color: darken( $button-color, 15% );
box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% ); box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );
} }

3
src/wp-admin/css/colors/_variables.scss
View File

@ -18,8 +18,9 @@ $link: #0073aa !default;
$link-focus: lighten( $link, 10% ) !default; $link-focus: lighten( $link, 10% ) !default;
$button-color: $highlight-color !default; $button-color: $highlight-color !default;
$form-checked: $highlight-color !default; $button-text-color: $text-color !default;
$form-checked: #7e8993 !default;
// admin menu & admin-bar // admin menu & admin-bar