vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-06-28 22:30:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Buttons: Update styles and colors.

Browse Source 
* Aligns with the color standards. See https://make.wordpress.org/design/handbook/foundations/colors/
* Creates a consistent interaction experience between states.
* Improves contrast and accessibility.

props hugobaeta, afercia, melchoyce, michael-arestad.
fixes #31459.


git-svn-id: https://develop.svn.wordpress.org/trunk@34948 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi
2015-10-08 17:30:57 +00:00
parent a1389117b2
commit df1b726ed0
3 changed files with 80 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/wp-includes/css/buttons.css
View File

@@ -131,8 +131,8 @@ TABLE OF CONTENTS:
color: #555;
border-color: #cccccc;
background: #f7f7f7;
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
-webkit-box-shadow: 0 1px 0 #cccccc;
box-shadow: 0 1px 0 #cccccc;
vertical-align: top;
}
@@ -164,10 +164,10 @@ TABLE OF CONTENTS:
.wp-core-ui .button-link:focus {
-webkit-box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
0 0 2px 1px rgba(0, 115, 170, .8);
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
0 0 2px 1px rgba(0, 115, 170, .8);
}
.wp-core-ui .button.active,
@@ -176,20 +176,22 @@ TABLE OF CONTENTS:
.wp-core-ui .button-secondary:active {
background: #eee;
border-color: #999;
color: #32373c;
-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
-webkit-transform: translateY(1px);
-ms-transform: translateY(1px);
transform: translateY(1px);
}
.wp-core-ui .button.active:focus {
-webkit-box-shadow:
inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
0 0 2px 1px rgba(0, 115, 170, .8);
box-shadow:
inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
0 0 2px 1px rgba(0, 115, 170, .8);
}
.wp-core-ui .button[disabled],
@@ -213,36 +215,33 @@ TABLE OF CONTENTS:
---------------------------------------------------------------------------- */
.wp-core-ui .button-primary {
background: #00a0d2;
border-color: #0073aa;
-webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 );
box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
background: #0085ba;
border-color: #0073aa #006799 #006799;
-webkit-box-shadow: 0 1px 0 #006799;
box-shadow: 0 1px 0 #006799;
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 1px #006799,
1px 0 1px #006799,
0 1px 1px #006799,
-1px 0 1px #006799;
}
.wp-core-ui .button-primary.hover,
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary.focus,
.wp-core-ui .button-primary:focus {
background: #0091cd;
border-color: #0073aa;
-webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
background: #008ec2;
border-color: #006799;
color: #fff;
}
.wp-core-ui .button-primary.focus,
.wp-core-ui .button-primary:focus {
border-color: #0e3950;
-webkit-box-shadow:
inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
box-shadow:
inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
-webkit-box-shadow: 0 1px 0 #0073aa,
0 0 2px 1px #33b3db;
box-shadow: 0 1px 0 #0073aa,
0 0 2px 1px #33b3db;
}
.wp-core-ui .button-primary.active,
@@ -250,10 +249,9 @@ TABLE OF CONTENTS:
.wp-core-ui .button-primary.active:focus,
.wp-core-ui .button-primary:active {
background: #0073aa;
border-color: #005082;
color: rgba( 255, 255, 255, 0.95 );
-webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
border-color: #006799;
-webkit-box-shadow: inset 0 2px 0 #006799;
box-shadow: inset 0 2px 0 #006799;
vertical-align: top;
}
@@ -270,6 +268,19 @@ TABLE OF CONTENTS:
cursor: default;
}
.wp-core-ui .button.button-primary.button-hero {
-webkit-box-shadow: 0 2px 0 #006799;
box-shadow: 0 2px 0 #006799;
}
.wp-core-ui .button.button-primary.button-hero.active,
.wp-core-ui .button.button-primary.button-hero.active:hover,
.wp-core-ui .button.button-primary.button-hero.active:focus,
.wp-core-ui .button.button-primary.button-hero:active {
-webkit-box-shadow: inset 0 3px 0 #006799;
box-shadow: inset 0 3px 0 #006799;
}
/* ----------------------------------------------------------------------------
4.0 - Button Groups
---------------------------------------------------------------------------- */