X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/41578db67d72562346e4dbb2a14889b23d522813..HEAD:/wp-admin/css/colors/_mixins.scss?ds=sidebyside diff --git a/wp-admin/css/colors/_mixins.scss b/wp-admin/css/colors/_mixins.scss index 14db8a50..b9dd2efe 100644 --- a/wp-admin/css/colors/_mixins.scss +++ b/wp-admin/css/colors/_mixins.scss @@ -2,25 +2,33 @@ * Button mixin- creates 3d-ish button effect with correct * highlights/shadows, based on a base color. */ -@mixin button( $button-color, $text-color: white ) { +@mixin button( $button-color, $text-color: #fff ) { 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% ), 0 1px 0 rgba(0,0,0,.15); + box-shadow: 0 1px 0 darken( $button-color, 15% ); + } + + &:focus { + 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 ); + box-shadow: inset 0 2px 0 darken( $button-color, 15% ); } &[disabled], @@ -32,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; + } + } + }