From 8cd8941080df3c715c3cc6f6301d67e6178917bf Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Mon, 28 Apr 2014 14:39:36 +0100 Subject: [PATCH] Don't kill keyboard focus indication Sighted keyboard users need to have indication of where their current focus is... --- beautons.css | 6 +++--- beautons.min.css | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/beautons.css b/beautons.css index eef8311..3c70e98 100644 --- a/beautons.css +++ b/beautons.css @@ -82,12 +82,12 @@ color:#fff; /* [11] */ } - .btn:hover{ + .btn:hover, + .button:focus{ box-shadow:0 0 5px rgba(0, 0, 0, 0.5); } - .btn:active, - .btn:focus{ + .btn:active{ outline:none; box-shadow:0 0 5px rgba(0, 0, 0, 0.5) inset; } diff --git a/beautons.min.css b/beautons.min.css index 52763bd..ee636a8 100644 --- a/beautons.min.css +++ b/beautons.min.css @@ -2,4 +2,4 @@ * * @csswizardry -- csswizardry.com/beautons * - */.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:0;margin:0;padding-top:0;padding-bottom:0;line-height:3;height:3em;padding-right:1em;padding-left:1em;background-color:#2c77ba;border-radius:4px;overflow:visible}.btn,.btn:hover,.btn:active,.btn:focus{text-decoration:none;color:#fff}.btn:hover{box-shadow:0 0 5px rgba(0,0,0,0.5)}.btn:active,.btn:focus{outline:0;box-shadow:0 0 5px rgba(0,0,0,0.5) inset}.btn::-moz-focus-inner{border:0;padding:0}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2;height:2em}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4;height:4em}.btn--huge{padding-right:2em;padding-left:2em;line-height:5;height:5em}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{vertical-align:baseline;font-size:inherit;line-height:inherit;height:auto;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:default;box-shadow:none}.btn--soft{border-radius:5em}.btn--hard{border-radius:0} \ No newline at end of file + */.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:0;margin:0;padding-top:0;padding-bottom:0;line-height:3;height:3em;padding-right:1em;padding-left:1em;background-color:#2c77ba;border-radius:4px;overflow:visible}.btn,.btn:hover,.btn:active,.btn:focus{text-decoration:none;color:#fff}.btn:hover,.btn:focus{box-shadow:0 0 5px rgba(0,0,0,0.5)}.btn:active{outline:0;box-shadow:0 0 5px rgba(0,0,0,0.5) inset}.btn::-moz-focus-inner{border:0;padding:0}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2;height:2em}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4;height:4em}.btn--huge{padding-right:2em;padding-left:2em;line-height:5;height:5em}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{vertical-align:baseline;font-size:inherit;line-height:inherit;height:auto;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:default;box-shadow:none}.btn--soft{border-radius:5em}.btn--hard{border-radius:0} \ No newline at end of file