Buttons: Improve the .button-link CSS class for link-like buttons.

Updates `.button-link` adding color and underline to make link-like buttons look
like links by default. Introduces `.button-link-delete` as a modifier, stackable
CSS class for red button-links.

Props Cheffheid, afercia.

See #34242.
Fixes #35126.

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


git-svn-id: http://core.svn.wordpress.org/trunk@39989 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
2017-02-09 16:47:44 +00:00
parent 9bf3844ef9
commit d33301821b
51 changed files with 231 additions and 242 deletions

View File

@@ -149,8 +149,7 @@ TABLE OF CONTENTS:
.wp-core-ui .button.focus,
.wp-core-ui .button:focus,
.wp-core-ui .button-secondary:focus,
.wp-core-ui .button-link:focus {
.wp-core-ui .button-secondary:focus {
border-color: #5b9dd9;
-webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
@@ -210,9 +209,42 @@ TABLE OF CONTENTS:
background: none;
outline: none;
cursor: pointer;
/* Mimics the default link style in common.css */
color: #0073aa;
text-decoration: underline;
-webkit-transition-property: border, background, color;
transition-property: border, background, color;
-webkit-transition-duration: .05s;
transition-duration: .05s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.wp-core-ui .button-link:hover,
.wp-core-ui .button-link:active {
color: #00a0d2;
}
.wp-core-ui .button-link:focus {
color: #124964;
-webkit-box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
}
.wp-core-ui .button-link-delete {
color: #a00;
}
.wp-core-ui .button-link-delete:hover,
.wp-core-ui .button-link-delete:focus {
color: #f00;
}
.ie8 .wp-core-ui .button-link:focus {
outline: #5b9dd9 solid 1px;
}