Buttons: Update styles and colors.
* 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
parent
a1389117b2
commit
df1b726ed0
@ -4,31 +4,31 @@
|
||||
*/
|
||||
@mixin button( $button-color, $text-color: white ) {
|
||||
background: $button-color;
|
||||
border-color: darken( $button-color, 10% );
|
||||
border-color: darken( $button-color, 10% ) darken( $button-color, 15% ) darken( $button-color, 15% );
|
||||
color: $text-color;
|
||||
box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
|
||||
box-shadow: 0 1px 0 darken( $button-color, 15% );
|
||||
text-shadow: 0 -1px 1px darken( $button-color, 15% ),
|
||||
1px 0 1px darken( $button-color, 15% ),
|
||||
0 1px 1px darken( $button-color, 15% ),
|
||||
-1px 0 1px darken( $button-color, 15% );
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: darken( $button-color, 5% );
|
||||
background: lighten( $button-color, 3% );
|
||||
border-color: darken( $button-color, 15% );
|
||||
color: $text-color;
|
||||
box-shadow: inset 0 1px 0 lighten( $button-color, 10% );
|
||||
box-shadow: 0 1px 0 darken( $button-color, 15% );
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 1px 0 lighten( $button-color, 10% ),
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba( 30, 140, 190, .8 );
|
||||
box-shadow: inset 0 1px 0 darken( $button-color, 10% ),
|
||||
0 0 2px 1px #33b3db;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken( $button-color, 10% );
|
||||
border-color: darken( $button-color, 15% );
|
||||
color: $text-color;
|
||||
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 );
|
||||
box-shadow: inset 0 2px 0 darken( $button-color, 15% );
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
@ -40,4 +40,12 @@
|
||||
border-color: darken( $button-color, 15% ) !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
&.button-hero {
|
||||
box-shadow: 0 2px 0 darken( $button-color, 15% ) !important;
|
||||
&:active {
|
||||
box-shadow: inset 0 3px 0 darken( $button-color, 15% ) !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -462,13 +462,17 @@ strong {
|
||||
-webkit-appearance: none;
|
||||
line-height: 2;
|
||||
padding: 0 10px 1px;
|
||||
background: #00a0d2;
|
||||
border-color: #0073aa;
|
||||
background: #0085ba;
|
||||
border-color: #0073aa #006799 #006799;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
-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 );
|
||||
-webkit-box-shadow: 0 1px 0 #006799;
|
||||
box-shadow: 0 1px 0 #006799;
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 1px #006799,
|
||||
1px 0 1px #006799,
|
||||
0 1px 1px #006799,
|
||||
-1px 0 1px #006799;
|
||||
}
|
||||
|
||||
.split-button-primary {
|
||||
@ -486,42 +490,37 @@ strong {
|
||||
border-top-right-radius: 3px;
|
||||
-webkit-border-bottom-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-left: 0 none;
|
||||
border-left: 1px solid #006799;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.split-button-toggle i {
|
||||
margin: 4px 20px 3px 0;
|
||||
padding: 0 10px;
|
||||
border-left: 1px solid #fff;
|
||||
}
|
||||
|
||||
.split-button-primary:hover,
|
||||
.split-button-toggle:hover {
|
||||
outline: none;
|
||||
background: #0091cd;
|
||||
border-color: #0073aa;
|
||||
background: #008ec2;
|
||||
border-color: #006799;
|
||||
}
|
||||
|
||||
.split-button-primary:focus,
|
||||
.split-button-toggle:focus {
|
||||
outline: none;
|
||||
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;
|
||||
}
|
||||
|
||||
.split-button-primary:active,
|
||||
.split-button-toggle: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 10px #006799, 0 1px 0 #0073aa;
|
||||
box-shadow: inset 0 2px 10px #006799, 0 1px 0 #0073aa;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1438,15 +1437,15 @@ html {
|
||||
|
||||
.scan-submit:hover,
|
||||
.scan-submit:focus {
|
||||
background: #2991b7;
|
||||
border-color: #20708e;
|
||||
background: #008ec2;
|
||||
border-color: #006799;
|
||||
color: #fff;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.scan-submit:active {
|
||||
background: #2581a2;
|
||||
border-color: #20708e;
|
||||
background: #0073aa;
|
||||
border-color: #006799;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
---------------------------------------------------------------------------- */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user