Commit 0a024545 authored by Addy Osmani's avatar Addy Osmani

Merge pull request #37 from Sequoia/master

Added :focus styles to clear link to allow for keyboard navigation
parents 60185e13 74e49682
......@@ -240,7 +240,7 @@ html {
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
}
/* line 136 */
#todoapp #todo-stats .todo-clear a:hover {
#todoapp #todo-stats .todo-clear a:hover, #todoapp #todo-stats .todo-clear a:focus {
background: rgba(0, 0, 0, 0.15);
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
......@@ -255,7 +255,7 @@ html {
#todo-stats .todo-clear a:visited {
color: #777777;
}
#todo-stats .todo-clear a:hover {
#todo-stats .todo-clear a:hover, #todo-stats .todo-clear a:focus {
color: #336699;
}
......@@ -286,6 +286,7 @@ html {
* Fran�ois 'cahnory' Germain
*/
.ui-tooltip, .ui-tooltip-top, .ui-tooltip-right, .ui-tooltip-bottom, .ui-tooltip-left {
position:absolute;
color:#ffffff;
cursor:normal;
display:-moz-inline-stack;
......@@ -377,4 +378,4 @@ html {
-moz-transform:rotate(180deg);
-khtml-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
\ No newline at end of file
}
......@@ -240,7 +240,7 @@ html {
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
}
/* line 136 */
#todoapp #todo-stats .todo-clear a:hover {
#todoapp #todo-stats .todo-clear a:hover, #todoapp #todo-stats .todo-clear a:focus {
background: rgba(0, 0, 0, 0.15);
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
......@@ -255,7 +255,7 @@ html {
#todo-stats .todo-clear a:visited {
color: #777777;
}
#todo-stats .todo-clear a:hover {
#todo-stats .todo-clear a:hover, #todo-stats .todo-clear a:focus {
color: #336699;
}
......@@ -377,4 +377,4 @@ html {
-moz-transform:rotate(180deg);
-khtml-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
\ No newline at end of file
}
......@@ -517,7 +517,7 @@ body {
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
}
/* line 136 */
#todoapp #todo-stats .todo-clear a:hover {
#todoapp #todo-stats .todo-clear a:hover, #todoapp #todo-stats .todo-clear a:focus {
background: rgba(0, 0, 0, 0.15);
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
......
......@@ -149,7 +149,7 @@ body {
cursor: pointer;
}
#tasks .clear:hover {
#tasks .clear:hover, #tasks .clear:focus {
background: rgba(0, 0, 0, 0.15);
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
......@@ -164,4 +164,4 @@ body {
#tasks .count span {
font-weight: bold;
}
\ No newline at end of file
}
......@@ -305,7 +305,7 @@ body {
color: #777777;
}
#todo-stats .todo-clear a:hover {
color: #336699;
color: 336699;
}
#instructions {
......@@ -401,7 +401,7 @@ body {
border:0px;
}
/* line 136 */
#todoapp #todo-stats button:hover {
#todoapp #todo-stats button:hover, #todoapp #todo-stats button:focus {
background: rgba(0, 0, 0, 0.15);
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
......
......@@ -65,7 +65,7 @@
{! } !}
{! if (done) { !}
<span class="todo-clear">
<a data-action="clearCompleted">
<a data-action="clearCompleted" href="#">
Clear <span class="number-done">{!= done !}</span>
completed <span class="word-done">{!= done == 1 ? 'item' : 'items' !}</span>
</a>
......
......@@ -517,7 +517,7 @@ body {
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
}
/* line 136 */
#todoapp #todo-stats .todo-clear a:hover {
#todoapp #todo-stats .todo-clear a:hover, #todoapp #todo-stats .todo-clear a:focus {
background: rgba(0, 0, 0, 0.15);
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
......
......@@ -150,6 +150,13 @@ ul {
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
}
.todo-clear a:hover, .todo-clear a:focus {
background: rgba(0, 0, 0, 0.15);
}
#todoapp #todo-stats .todo-clear a:active {
position: relative;
top: 1px;
}
#credits {
......@@ -162,4 +169,4 @@ ul {
#credits a {
color: #888888;
}
\ No newline at end of file
}
......@@ -187,10 +187,11 @@ body {
color: #777777;
font-size: 12px;
}
/* these two rules are overridden below. find ".todo-clear a" */
#todo-stats .todo-clear a:visited {
color: #777777;
}
#todo-stats .todo-clear a:hover {
#todo-stats .todo-clear a:hover, #todo-stats .todo-clear a:focus {
color: #336699;
}
......@@ -383,7 +384,7 @@ body {
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
}
/* line 136 */
#todoapp #todo-stats .todo-clear a:hover {
#todoapp #todo-stats .todo-clear a:hover, #todoapp #todo-stats .todo-clear a:focus {
background: rgba(0, 0, 0, 0.15);
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
......
......@@ -417,7 +417,7 @@ body {
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
}
/* line 136 */
#todoapp #todo-stats .todo-clear a:hover {
#todoapp #todo-stats .todo-clear a:hover, #todoapp #todo-stats .todo-clear a:focus {
background: rgba(0, 0, 0, 0.15);
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
......
......@@ -137,7 +137,9 @@ body {
cursor: pointer;
}
#tasks .clear:hover {
/* focus is actually pointless here as it's not
possible to tab to the anchor for some reason */
#tasks .clear:hover, #tasks .clear:focus {
background: rgba(0, 0, 0, 0.15);
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
......@@ -164,4 +166,4 @@ body {
#credits a {
color: #888;
}
\ No newline at end of file
}
......@@ -341,17 +341,52 @@ body {
#todo-stats .todo-clear {
float: right;
}
#todo-stats .todo-clear a {
#todo-stats a.todo-clear {
color: #777777;
font-size: 12px;
}
#todo-stats .todo-clear a:visited {
#todo-stats a.todo-clear {
color: #777777;
}
#todo-stats .todo-clear a:hover {
#todo-stats a.todo-clear:hover, #todo-stats a.todo-clear:focus {
color: #336699;
}
/* line 125 */
#todo-stats a.todo-clear {
display: block;
line-height: 20px;
text-decoration: none;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-o-border-radius: 12px;
-ms-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.1);
color: #555555;
font-size: 11px;
margin-top: 8px;
padding: 0 10px 1px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
}
/* line 136 */
#todo-stats a.todo-clear:hover, #todo-stats a.todo-clear:focus {
background: rgba(0, 0, 0, 0.15);
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
}
/* line 139 */
#todoapp #todo-stats a.todo-clear:active {
position: relative;
top: 1px;
}
#instructions {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment