Permalink
Browse files

Merge pull request #37 from Sequoia/master

Added :focus styles to clear link to allow for keyboard navigation
  • Loading branch information...
2 parents 60185e1 + 74e4968 commit 0a0245451af10def56c840a1d5ddd06873084ad6 @addyosmani addyosmani committed Dec 28, 2011
@@ -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);
-}
+}
@@ -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);
-}
+}
@@ -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;
-}
+}
@@ -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;
-}
+}
@@ -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;
-}
+}
@@ -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 {

0 comments on commit 0a02454

Please sign in to comment.