|
.button-colorized(@baseColor) { |
|
background: @baseColor; |
|
border-color: darken(@baseColor, 5%) darken(@baseColor, 9%) darken(@baseColor, 9%); |
|
-webkit-box-shadow: 0 1px 0 darken(@baseColor, 9%); |
|
box-shadow: 0 1px 0 darken(@baseColor, 9%); |
|
color: #fff; |
|
text-decoration: none; |
|
text-shadow: 0 -1px 1px darken(@baseColor, 9%), 1px 0 1px darken(@baseColor, 9%), 0 1px 1px darken(@baseColor, 9%), -1px 0 1px darken(@baseColor, 9%); |
|
|
|
&.hover, |
|
&:hover, |
|
&.focus, |
|
&:focus { |
|
background: lighten(@baseColor, 2%); |
|
border-color: darken(@baseColor, 9%); |
|
color: #fff; |
|
} |
|
|
|
&.focus, |
|
&:focus { |
|
-webkit-box-shadow: 0 1px 0 darken(@baseColor, 5%), 0 0 2px 1px darken(@baseColor, 17%); |
|
box-shadow: 0 1px 0 darken(@baseColor, 5%), 0 0 2px 1px darken(@baseColor, 17%); |
|
} |
|
|
|
|
|
&.active, |
|
&.active:hover, |
|
&.active:focus, |
|
&:active { |
|
background: darken(@baseColor, 5%); |
|
border-color: darken(@baseColor, 9%); |
|
-webkit-box-shadow: inset 0 2px 0 darken(@baseColor, 9%); |
|
box-shadow: inset 0 2px 0 darken(@baseColor, 9%); |
|
vertical-align: top; |
|
} |
|
|
|
&[disabled], |
|
&:disabled, |
|
&-disabled, |
|
&.disabled { |
|
color: lighten(@baseColor, 27%) !important; |
|
background: lighten(@baseColor, 2%) !important; |
|
border-color: lighten(@baseColor, 3%) !important; |
|
-webkit-box-shadow: none !important; |
|
box-shadow: none !important; |
|
text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important; |
|
cursor: default; |
|
} |
|
} |
|
|
|
// example |
|
.button { |
|
|
|
&.button-success { |
|
.button-colorized(#46b450); // #46b450 found in .notice-success (common.css) |
|
} |
|
|
|
&.button-error { |
|
.button-colorized(#d54e21); // #d54e21 found in #adminmenu .update-plugins (admin-menu.css) |
|
} |
|
} |
