.button-colors(@bgColor) {
background: @bgColor;
- &:hover,
- &:focus {
+ &:hover {
// The inner bottom bevel should match the active background color.
box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
border-bottom-color: mix(#000, @bgColor, 20%);
+ }
+
+ &:focus {
+ border-color: rgba(0,0,0,0.2);
+ box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
+
outline: none;
// remove outline in Firefox
&::-moz-focus-inner {