library-mirrors/pure
1
0
Fork 0
mirror of https://github.com/pure-css/pure.git synced 2024-10-05 19:24:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #86 from ericf/improve-focus

Browse Source 
Improve `:focus` styles by making the same as `:hover` styles
This commit is contained in:
Eric Ferraiuolo 2013-06-11 13:53:17 -07:00
commit 6edb7e1344
7 changed files with 56 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
HISTORY.md
View File

@ -4,8 +4,11 @@ Pure Change History
NEXT
----
* Fixed accessibility mistake by removing `a:focus {outline: none;}` rule from
`buttons-core.css`.
* (!) Fixed accessibility mistake by removing `a:focus {outline: none;}` rule
from `buttons-core.css`.
* Improved `:focus` styles by applying the same rules that are used by `:hover`
styles.
* Added improvements to developer workflow:

2
src/buttons/css/buttons-core.css
View File

@ -16,7 +16,7 @@
}
/* Firefox: Get rid of the inner focus border */
.pure-button::-moz-focus-inner{
.pure-button::-moz-focus-inner {
padding: 0;
border: 0;
}

30
src/buttons/css/buttons.css
View File

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

79
src/buttons/tests/manual/button.html
View File

@ -2,20 +2,11 @@
<html>
<head>
<title>Button Manual Tests</title>
<link rel="stylesheet" type="text/css" href="../../../../build/pure-min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome-ie7.css" rel="stylesheet">
<link rel="stylesheet" href="../../../../build/pure-min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome-ie7.css">
<style>
body {
padding: 30px;
text-align: center;
}
a {
color: blue;
}
.pure-button-green {
text-transform: uppercase;
font-weight:bold;
@ -34,7 +25,6 @@
text-shadow: 1px 1px 1px rgb(170, 46, 23);
border: 3px solid rgb(131, 2, 2);
border-radius: 20px;
}
.pure-button-yellow {
@ -44,40 +34,45 @@
text-shadow: -1px 1px 1px white;
}
.pure-button-wedding:hover {
.pure-button-wedding:hover,
.pure-button-wedding:focus {
background: #555;
color: #eee;
}
.pure-button-wedding:active {
background: #222;
color: #fff;
box-shadow: none;
}
</style>
<script type="text/javascript" src="//use.typekit.net/ajf8ggy.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<h2>Regular Buttons</h2>
<button class="pure-button">A Regular Button</button>
<a class="pure-button" href="#">An anchor Button</a>
<body>
<h1>Test Button Styles</h1>
<h2>Regular Buttons</h2>
<p>
<button class="pure-button">A Regular Button</button>
<a class="pure-button" href="#">An anchor Button</a>
</p>
<h2>Disabled Buttons</h2>
<button class="pure-button pure-button-disabled">A Regular Button</button>
<p>
<button class="pure-button pure-button-disabled" disabled>A Regular Button</button>
<a class="pure-button pure-button-disabled" href="#">An anchor Button</a>
</p>
<h2>Active Buttons</h2>
<button class="pure-button pure-button-active">A Regular Button</button>
<a class="pure-button pure-button-active" href="#">An anchor Button</a>
<p>
<button class="pure-button pure-button-active">A Regular Button</button>
<a class="pure-button pure-button-active" href="#">An anchor Button</a>
</p>
<h2>Primary/Selected Buttons</h2>
<button class="pure-button pure-button-primary">A Regular Button</button>
<a class="pure-button pure-button-primary" href="#">An anchor Button</a>
<p>
<button class="pure-button pure-button-primary">A Regular Button</button>
<a class="pure-button pure-button-primary" href="#">An anchor Button</a>
</p>
<h2>Customizing Buttons</h2>
<p>
@ -88,7 +83,6 @@
<button class="pure-button pure-button-red">Another custom Button</button>
<a class="pure-button pure-button-red" href="#">Custom Button</a>
</p>
<p>
<button class="pure-button pure-button-yellow">Another custom Button</button>
<a class="pure-button pure-button-yellow" href="#">Custom Button</a>
@ -106,26 +100,13 @@
</a>
</p>
<h2>Primary Form Buttons</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation <a href="#">ullamco laboris nisi ut aliquip</a> ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat <a href="#">nulla pariatur</a>. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<a class="pure-button pure-button-primary" href="#">Anchor</a>
<button class="pure-button pure-button-primary">Button</button>
<input type="submit" class="pure-button pure-button-primary" value="Submit">
<input type="button" class="pure-button pure-button-primary" value="Input Button">
<input type="reset" class="pure-button pure-button-primary" value="Reset">
</p>
<div class= "pure-g-r">
<div class= "pure-u-1">
<form class="pure-form">
<a class="pure-button pure-button-primary">Anchor</a>
<button class="pure-button pure-button-primary">Button</button>
<input type="submit" class="pure-button pure-button-primary" value="Submit" />
<input type="button" class="pure-button pure-button-primary" value="Input Button" />
<input type="reset" class="pure-button pure-button-primary" value="Reset" />
</form>
</div>
</div>
</body>
</html>

2
src/menus/css/menus-core.css
View File

@ -30,7 +30,7 @@
}
.pure-menu-open > ul:focus {
outline: none;
outline: 0;
}
.pure-menu li { position: relative; }

7
src/menus/css/menus.css
View File

@ -40,13 +40,14 @@
}
/* HOVER STATES */
.pure-menu li a:hover {
.pure-menu li a:hover,
.pure-menu li a:focus {
background: #eee;
}
/* DISABLED STATES */
.pure-menu li.pure-menu-disabled a:hover {
.pure-menu li.pure-menu-disabled a:hover,
.pure-menu li.pure-menu-disabled a:focus {
background: #fff;
color: #bfbfbf;
}

1
src/menus/tests/manual/menus.html
View File

@ -4,6 +4,7 @@
<meta charset='utf-8'>
<meta name="viewport" content="width = device-width">
<title>Menus CSS</title>
<link rel="stylesheet" type="text/css" href="../../../../build/base-min.css">
<link rel="stylesheet" type="text/css" href="../../../../build/menus-min.css">
<style>