Improve :focus styles by making the same as :hover styles

This commit is contained in:
Eric Ferraiuolo 2013-06-11 15:36:15 -04:00
parent f19b4a8dc6
commit 83823f17f0
2 changed files with 16 additions and 18 deletions

View File

@ -1,4 +1,4 @@
/*csslint unqualified-attributes:false*/ /*csslint unqualified-attributes:false, outline-none:false*/
.pure-button { .pure-button {
font-size: 100%; font-size: 100%;
@ -23,16 +23,19 @@
} }
.pure-button-hover, .pure-button-hover,
.pure-button:hover { .pure-button:hover,
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=0); .pure-button:focus {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.05))); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0);
background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.05)); background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
background-image: -ms-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15)); background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.05)); background-image: -ms-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.05)); background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
.pure-button:focus {
outline: 0;
} }
.pure-button-active, .pure-button-active,
.pure-button:active { .pure-button:active {
box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
@ -41,6 +44,7 @@
.pure-button[disabled], .pure-button[disabled],
.pure-button-disabled, .pure-button-disabled,
.pure-button-disabled:hover, .pure-button-disabled:hover,
.pure-button-disabled:focus,
.pure-button-disabled:active { .pure-button-disabled:active {
border: none; border: none;
background-image: none; background-image: none;
@ -63,8 +67,6 @@
border: 0; border: 0;
} }
/* Sam */
.pure-button-primary, .pure-button-primary,
.pure-button-selected, .pure-button-selected,
a.pure-button-primary, a.pure-button-primary,
@ -72,7 +74,3 @@ a.pure-button-selected {
background-color: rgb(0, 120, 231); background-color: rgb(0, 120, 231);
color: #fff; color: #fff;
} }
.pure-button:-moz-focusring {
outline-color: rgba(0, 0, 0, 0.85);
}

View File

@ -40,8 +40,8 @@
} }
/* HOVER STATES */ .pure-menu li a:hover,
.pure-menu li a:hover { .pure-menu li a:focus {
background: #eee; background: #eee;
} }