Accessibility: Improve and modernize user interface controls: Improve the buttons active CSS class.

- improves the buttons `.active` CSS class for buttons that need to be styled as "pressed"
- update the alternate color schemes `.active` CSS class accordingly
- improves a few icons colors in the alternate color schemes

See #34904.


git-svn-id: https://develop.svn.wordpress.org/trunk@46423 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2019-10-07 18:45:45 +00:00
parent 4848b1e3aa
commit ae8bef6419
3 changed files with 49 additions and 9 deletions
+14 -1
View File
@@ -28,7 +28,7 @@ a {
.curtime #timestamp:before,
#post-body .misc-pub-revisions:before,
span.wp-media-buttons-icon:before {
color: $link-focus;
color: currentColor;
}
@@ -99,6 +99,19 @@ textarea:focus {
box-shadow: 0 0 0 1px $button-color;
}
.button:active {
background: darken( $button-color, 5% );
border-color: darken( $button-color, 5% );
}
.button.active,
.button.active:focus,
.button.active:hover {
border-color: darken( $button-color, 5% );
color: darken( $button-color, 5% );
box-shadow: inset 0 2px 5px -3px darken( $button-color, 5% );
}
.button-primary {
@include button( $button-color );
}
+10 -3
View File
@@ -20,12 +20,19 @@
0 0 0 3px $button-color;
}
&:active,
&:active {
background: darken( $button-color, 5% );
border-color: darken( $button-color, 5% );
color: $text-color;
}
&.active,
&.active:focus,
&.active:hover {
background: darken( $button-color, 5% );
border-color: darken( $button-color, 5% );
background: $button-color;
color: $text-color;
border-color: darken( $button-color, 15% );
box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );
}
&[disabled],