Merge pull request #1245 from arthurvr/completedCount

Remove completed count from first apps

browser-tests/test.js

@@ -262,12 +262,10 @@ module.exports.todoMVCTest = function (frameworkName, baseUrl, speedMode, laxMod
 
 
 		test.describe('Clear completed button', function () {
-			test.it('should display the number of completed items', function () {
+			test.it('should display the correct text', function () {
 				createStandardItems();
 				page.toggleItemAtIndex(1);
-				testOps.assertClearCompleteButtonText('Clear completed (1)');
-				page.toggleItemAtIndex(2);
-				testOps.assertClearCompleteButtonText('Clear completed (2)');
+				testOps.assertClearCompleteButtonText('Clear completed');
 			});
 
 			test.it('should remove completed items when clicked', function () {

examples/ampersand/index.html

@@ -30,7 +30,7 @@
                         <a href="#/completed" data-hook="completed-mode">Completed</a>
                     </li>
                 </ul>
-                <button id="clear-completed" data-hook="clear-completed">Clear completed (<span data-hook="completed-count">1</span>)</button>
+                <button id="clear-completed" data-hook="clear-completed">Clear completed</button>
             </footer>
         </section>
         <footer id="info">

examples/ampersand/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/angular-dart/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/angular-dart/web/index.html

@@ -39,7 +39,7 @@
 				<span id="todo-count"><strong>{{todo.remaining()}}</strong>
 					<ng-pluralize count="todo.remaining()" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
 				</span>
-				<button id="clear-completed" ng-click="todo.clearCompleted()" ng-if="todo.completed() > 0">Clear completed ({{todo.completed()}})</button>
+				<button id="clear-completed" ng-click="todo.clearCompleted()" ng-if="todo.completed() > 0">Clear completed</button>
 			</footer>
 		</section>
 		<footer id="info">

examples/angularjs-perf/index.html

@@ -46,7 +46,7 @@
 						<a ng-class="{selected: location.path() == '/completed'}" href="#/completed">Completed</a>
 					</li>
 				</ul>
-				<button id="clear-completed" ng-click="clearCompletedTodos()" ng-show="remainingCount < todos.length">Clear completed ({{todos.length - remainingCount}})</button>
+				<button id="clear-completed" ng-click="clearCompletedTodos()" ng-show="remainingCount < todos.length">Clear completed</button>
 			</footer>
 		</section>
 		<footer id="info">

examples/angularjs-perf/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/angularjs/index.html

@@ -49,7 +49,7 @@
 							<a ng-class="{selected: status == 'completed'}" href="#/completed">Completed</a>
 						</li>
 					</ul>
-					<button id="clear-completed" ng-click="clearCompletedTodos()" ng-show="completedCount">Clear completed ({{completedCount}})</button>
+					<button id="clear-completed" ng-click="clearCompletedTodos()" ng-show="completedCount">Clear completed</button>
 				</footer>
 			</section>
 			<footer id="info">

examples/angularjs/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/angularjs_require/index.html

@@ -49,7 +49,7 @@
 						<a ng-class="{selected: location.path() == '/completed'}" href="#/completed">Completed</a>
 					</li>
 				</ul>
-				<button id="clear-completed" ng-click="clearDoneTodos()" ng-show="remainingCount < todos.length">Clear completed ({{todos.length - remainingCount}})</button>
+				<button id="clear-completed" ng-click="clearDoneTodos()" ng-show="remainingCount < todos.length">Clear completed</button>
 			</footer>
 		</section>
 		<footer id="info">

examples/angularjs_require/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/ariatemplates/js/view/Todo.tpl

@@ -98,7 +98,7 @@
 
 	{macro itemsclear()}
 		{if data.itemscompleted > 0}
-			<button id="clear-completed" {on click "clearCompleted"/}>Clear completed (${data.itemscompleted})</button>
+			<button id="clear-completed" {on click "clearCompleted"/}>Clear completed</button>
 		{/if}
 	{/macro}
 

examples/ariatemplates/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/atmajs/js/app.mask

@@ -24,7 +24,7 @@ section #todoapp {
 
 			+if (status.completedCount > 0) {
 				button #clear-completed x-signal = 'click: removeAllCompleted' >
-					'Clear completed (~[bind:status.completedCount])'
+					'Clear completed'
 			}
 		}
 	}

examples/atmajs/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/atmajs/package.json

@@ -7,6 +7,6 @@
     "maskjs": "^0.10.1",
     "ruta": "^0.1.12",
     "todomvc-common": "^1.0.1",
-    "todomvc-app-css": "^1.0.0",
+    "todomvc-app-css": "^1.0.0"
   }
 }

examples/backbone/index.html

@@ -46,7 +46,7 @@
 				</li>
 			</ul>
 			<% if (completed) { %>
-			<button id="clear-completed">Clear completed (<%= completed %>)</button>
+			<button id="clear-completed">Clear completed</button>
 			<% } %>
 		</script>
 		<script src="node_modules/todomvc-common/base.js"></script>

examples/backbone/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/backbone_marionette/index.html

@@ -37,7 +37,7 @@
 					<a href="#/completed">Completed</a>
 				</li>
 			</ul>
-			<button id="clear-completed" <% if (!completedCount) { %>class="hidden"<% } %>>Clear completed (<%= completedCount %>)</button>
+			<button id="clear-completed" <% if (!completedCount) { %>class="hidden"<% } %>>Clear completed</button>
 		</script>
 		<script type="text/html" id="template-header">
 			<h1>todos</h1>

examples/backbone_marionette/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/backbone_require/js/templates/stats.html

@@ -11,5 +11,5 @@
 	</li>
 </ul>
 <% if ( completed ) { %>
-<button id="clear-completed">Clear completed (<%= completed %>)</button>
+<button id="clear-completed">Clear completed</button>
 <% } %>

examples/backbone_require/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/canjs/index.html

@@ -48,7 +48,7 @@
 						<li>{{{link "Completed" "completed"}}}</li>
 					</ul>
 					<button id="clear-completed" class="{{^if todos.completed.length}}hidden{{/if}}" can-click="clearCompleted">
-						Clear completed ({{todos.completed.length}})
+						Clear completed
 					</button>
 				</footer>
 			</todo-app>

examples/canjs/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/canjs_require/index.html

@@ -46,7 +46,7 @@
 						<li>{{{link "Completed" "completed"}}}</li>
 					</ul>
 					<button id="clear-completed" class="{{^if todos.completed.length}}hidden{{/if}}" can-click="clearCompleted">
-						Clear completed ({{todos.completed.length}})
+						Clear completed
 					</button>
 				</footer>
 			</todo-app>

examples/canjs_require/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/chaplin-brunch/app/views/footer-view.coffee

@@ -32,7 +32,6 @@ module.exports = class FooterView extends View
     countDescription = (if active is 1 then 'item' else 'items')
     @find('.todo-count-title').textContent = countDescription
 
-    @find('#completed-count').textContent = "(#{completed})"
     utils.toggle @find('#clear-completed'), completed > 0
     utils.toggle @el, total > 0
 

examples/chaplin-brunch/app/views/templates/footer.hbs

@@ -14,4 +14,4 @@
     <a href="#/completed">Completed</a>
   </li>
 </ul>
-<button id="clear-completed">Clear completed <span id="completed-count"></span></button>
+<button id="clear-completed">Clear completed</button>

examples/chaplin-brunch/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/chaplin-brunch/public/app.js

@@ -417,7 +417,6 @@ module.exports = FooterView = (function(_super) {
     this.find('#todo-count > strong').textContent = active;
     countDescription = (active === 1 ? 'item' : 'items');
     this.find('.todo-count-title').textContent = countDescription;
-    this.find('#completed-count').textContent = "(" + completed + ")";
     utils.toggle(this.find('#clear-completed'), completed > 0);
     return utils.toggle(this.el, total > 0);
   };
@@ -481,7 +480,7 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
   
 
 
-  return "<span id=\"todo-count\">\n  <strong></strong>\n  <span class=\"todo-count-title\">items</span>\n  left\n</span>\n<ul id=\"filters\">\n  <li>\n    <a href=\"#/\">All</a>\n  </li>\n  <li>\n    <a href=\"#/active\">Active</a>\n  </li>\n  <li>\n    <a href=\"#/completed\">Completed</a>\n  </li>\n</ul>\n<button id=\"clear-completed\">Clear completed <span id=\"completed-count\"></span></button>\n";
+  return "<span id=\"todo-count\">\n  <strong></strong>\n  <span class=\"todo-count-title\">items</span>\n  left\n</span>\n<ul id=\"filters\">\n  <li>\n    <a href=\"#/\">All</a>\n  </li>\n  <li>\n    <a href=\"#/active\">Active</a>\n  </li>\n  <li>\n    <a href=\"#/completed\">Completed</a>\n  </li>\n</ul>\n<button id=\"clear-completed\">Clear completed</button>\n";
   });
 if (typeof define === 'function' && define.amd) {
   define([], function() {

examples/derby/views/todos/index.html

@@ -54,7 +54,7 @@
 			</li>
 		</ul>
 		<button x-bind=click:clearCompleted id="clear-completed" class="{#unless _list.completed}non-completed{/}">
-			Clear completed (<span>{_list.completed.length}</span>)
+			Clear completed
 		</button>
 	</footer>
 

examples/dijon/js/views/FooterView.js

@@ -28,17 +28,13 @@
 			},
 			renderCounts: function( numTodosTotal, numTodosActive ) {
 				var numTodosCompleted = numTodosTotal - numTodosActive,
-					countTitle = '<strong>' + numTodosActive + '</strong> ' + this.pluralizeUtil.pluralize( numTodosActive, 'item' ) + ' left',
-					clearTitle = 'Clear completed (' + numTodosCompleted + ')';
+					countTitle = '<strong>' + numTodosActive + '</strong> ' + this.pluralizeUtil.pluralize( numTodosActive, 'item' ) + ' left';
 
 				// Only show the footer when there are at least one todo.
 				$footer.toggle( !!numTodosTotal );
 
-				// Active todo count
-				$count.html( countTitle );
-
-				// Toggle clear button and update title
-				$clearBtn.text( clearTitle ).toggle( !!numTodosCompleted );
+				// Toggle clear button
+				$clearBtn.toggle( !!numTodosCompleted );
 			}
 		};
 	};

examples/dijon/node_modules/todomvc-app-css/index.css

@@ -316,20 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	top: 0;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/dojo/index.html

@@ -61,7 +61,7 @@
 								<a data-dojo-type="todo/widgets/CSSToggleWidget" data-dojo-props="_setSelectedAttr: {type: 'classExists'}, selected: at(this, 'status').transform(this.statusConverter), statusForElem: 'completed'" href="#/completed">Completed</a>
 							</li>
 						</ul>
-						<button id="clear-completed" data-dojo-type="dijit/_WidgetBase" data-dojo-attach-event="click: clearCompletedTodos" data-dojo-props="_setHiddenAttr: '', hidden: at(this, 'completedCount').transform(this.emptyConverter)">Clear completed (<span data-dojo-type="dojox/mvc/Element" data-dojo-props="innerText: at(this, 'completedCount')"></span>)</button>
+						<button id="clear-completed" data-dojo-type="dijit/_WidgetBase" data-dojo-attach-event="click: clearCompletedTodos" data-dojo-props="_setHiddenAttr: '', hidden: at(this, 'completedCount').transform(this.emptyConverter)">Clear completed</button>
 					</footer>
 				</section>
 			</script>

examples/dojo/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/durandal/js/views/list.html

@@ -31,6 +31,6 @@
 		</li>
 	</ul>
 	<button id="clear-completed" data-bind="visible: completedCount, click: removeCompleted">
-		Clear completed (<span data-bind="text: completedCount"></span>)
+		Clear completed
 	</button>
 </footer>

examples/emberjs/index.html

@@ -51,7 +51,7 @@
 								</li>
 							</ul>
 							{{#if completed.length}}
-								<button id="clear-completed" {{action "clearCompleted"}}>Clear completed ({{completed.length}})</button>
+								<button id="clear-completed" {{action "clearCompleted"}}>Clear completed</button>
 							{{/if}}
 						</footer>
 					{{/if}}

examples/emberjs/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/epitome/index.html

@@ -49,7 +49,7 @@
 				</li>
 			</ul>
 			<% if (completed) { %>
-			<button id="clear-completed">Clear completed (<%=completed%>)</button>
+			<button id="clear-completed">Clear completed</button>
 			<% } %>
 		</script>
 		<script src="node_modules/todomvc-common/base.js"></script>

examples/epitome/node_modules/todomvc-app-css/index.css

@@ -316,20 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	top: 0;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/exoskeleton/index.html

@@ -46,7 +46,7 @@
 				</li>
 			</ul>
 			<% if (completed) { %>
-			<button id="clear-completed">Clear completed (<%= completed %>)</button>
+			<button id="clear-completed">Clear completed</button>
 			<% } %>
 		</script>
 		<script src="node_modules/todomvc-common/base.js"></script>

examples/exoskeleton/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/extjs_deftjs/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/extjs_deftjs/templates/todolist.tpl

@@ -30,7 +30,7 @@
         <footer id="footer">
             <span id="todo-count"><strong>{[ this.controller.incompleteCount() ]}</strong> {[ ( this.controller.incompleteCount() == 1 ) ? "item" : "items" ]} left</span>
             <tpl if="this.controller.completedCount()">
-                <button id="clear-completed" class="clearcompleted">Clear completed ({[ this.controller.completedCount() ]})</button>
+                <button id="clear-completed" class="clearcompleted">Clear completed</button>
             </tpl>
         </footer>
     </tpl>

examples/firebase-angular/index.html

@@ -46,7 +46,7 @@
 						<a ng-class="{selected: location.path() == '/completed'}" href="#/completed">Completed</a>
 					</li>
 				</ul>
-				<button id="clear-completed" ng-click="clearCompletedTodos()" ng-show="completedCount">Clear completed ({{completedCount}})</button>
+				<button id="clear-completed" ng-click="clearCompletedTodos()" ng-show="completedCount">Clear completed</button>
 			</footer>
 		</section>
 		<footer id="info">

examples/firebase-angular/node_modules/todomvc-app-css/index.css

@@ -316,20 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	top: 0;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/flight/app/templates/stats.html

@@ -13,5 +13,5 @@
 	</li>
 </ul>
 <% if (completed) { %>
-<button id="clear-completed">Clear completed (<%= completed %>)</button>
+<button id="clear-completed">Clear completed</button>
 <% } %>

examples/flight/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/jquery/index.html

@@ -50,7 +50,7 @@
 					<a {{#eq filter 'completed'}}class="selected"{{/eq}}href="#/completed">Completed</a>
 				</li>
 			</ul>
-			{{#if completedTodos}}<button id="clear-completed">Clear completed ({{completedTodos}})</button>{{/if}}
+			{{#if completedTodos}}<button id="clear-completed">Clear completed</button>{{/if}}
 		</script>
 		<script src="node_modules/todomvc-common/base.js"></script>
 		<script src="node_modules/jquery/dist/jquery.js"></script>

examples/jquery/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/kendo/index.html

@@ -35,8 +35,8 @@
 			</ul>
 			<button id="clear-completed"
 				data-bind="click: destroyCompleted,
-							 visible: completedCount,
-							 text: clearCompletedText">
+							 visible: completedCount">
+				Clear completed
 			</button>
 			</footer>
 		</section>

examples/kendo/js/app.js

@@ -164,9 +164,6 @@ var app = app || {};
 		activeCountText: function () {
 			return this.activeCount() === 1 ? 'item' : 'items';
 		},
-		clearCompletedText: function () {
-			return 'Clear completed (' + this.completedCount() + ')';
-		},
 
 		// Class attribute bound methods
 		todoItemClass: function (item) {

examples/knockback/js/viewmodels/app.js

@@ -91,7 +91,7 @@
         return function() {
           var count;
           if ((count = _this.completed_count())) {
-            return "Clear completed (" + count + ")";
+            return "Clear completed";
           } else {
             return '';
           }

examples/knockback/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/knockoutjs/index.html

@@ -42,7 +42,7 @@
 						<a data-bind="css: { selected: showMode() == 'completed' }" href="#/completed">Completed</a>
 					</li>
 				</ul>
-				<button id="clear-completed" data-bind="visible: completedCount, click: removeCompleted">Clear completed (<span data-bind="text: completedCount"></span>)</button>
+				<button id="clear-completed" data-bind="visible: completedCount, click: removeCompleted">Clear completed</button>
 			</footer>
 		</section>
 		<footer id="info">

examples/knockoutjs/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/knockoutjs_require/index.html

@@ -31,7 +31,7 @@
 					<strong data-bind="text: remainingCount">0</strong>
 					<span data-bind="text: getLabel(remainingCount)"></span> left
 				</span>
-				<button id="clear-completed" data-bind="visible: completedCount, click: removeCompleted">Clear completed (<span data-bind="text: completedCount"></span>)</button>
+				<button id="clear-completed" data-bind="visible: completedCount, click: removeCompleted">Clear completed</button>
 			</footer>
 		</section>
 		<footer id="info">

examples/knockoutjs_require/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/lavaca_require/js/templates/todos.html

@@ -21,6 +21,6 @@
 				<a {@eq key=filter value="completed"}class="selected"{/eq} href="/completed">Completed</a>
 			</li>
 		</ul>
-		{@gt key=itemsCompleted value="0"}<button id="clear-completed">Clear completed ({itemsCompleted})</button>{/gt}
+		{@gt key=itemsCompleted value="0"}<button id="clear-completed">Clear completed</button>{/gt}
 	</footer>
 {/items}

examples/lavaca_require/node_modules/todomvc-app-css/index.css

@@ -316,20 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	top: 0;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/meteor/app.html

@@ -60,7 +60,7 @@
 					{{/each}}
 		</ul>
 		{{#if todos_completed}}
-			<button id="clear-completed">Clear completed ({{todos_completed}})</button>
+			<button id="clear-completed">Clear completed</button>
 		{{/if}}
 	</footer>
 </template>

examples/mithril/js/views/footer-view.js

@@ -31,6 +31,6 @@ app.footer = function (ctrl) {
 			])
 		]), ctrl.amountCompleted() === 0 ? '' : m('button#clear-completed', {
 			onclick: ctrl.clearCompleted.bind(ctrl)
-		}, 'Clear completed (' + amountCompleted + ')')
+		}, 'Clear completed')
 	]);
 };

examples/mithril/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/olives/index.html

@@ -30,7 +30,7 @@
 			<footer id="footer" data-stats="bind:toggleClass,nbItems,show">
 				<span id="todo-count"><strong data-stats="bind:innerHTML,nbLeft">0</strong> <span data-stats="bind:innerHTML,plural"></span> left</span>
 				<button id="clear-completed" data-event="listen:click,delAll" data-stats="bind:toggleClass,nbCompleted,show">
-					Clear completed (<span data-stats="bind:innerHTML,nbCompleted"></span>)
+					Clear completed
 				</button>
 			</footer>
 		</section>

examples/olives/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,20 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	top: 0;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/polymer/elements/td-todos.html

@@ -35,7 +35,7 @@
 						<a href="../#/completed">Completed</a>
 					</li>
 				</core-selector>
-				<button hidden?="{{model.completedCount == 0}}" id="clear-completed" on-click="{{clearCompletedAction}}">Clear completed ({{model.completedCount}})</button>
+				<button hidden?="{{model.completedCount == 0}}" id="clear-completed" on-click="{{clearCompletedAction}}">Clear completed</button>
 			</footer>
 		</section>
 	</template>

examples/puremvc/index.html

@@ -30,7 +30,7 @@
 						<a id="filterCompleted" href="#/completed">Completed</a>
 					</li>
 				</ul>
-				<button id="clear-completed">Clear completed (1)</button>
+				<button id="clear-completed">Clear completed</button>
 			</footer>
 		</section>
 		<footer id="info">

examples/puremvc/js/view/component/TodoForm.js

@@ -259,7 +259,7 @@ puremvc.define({
 
 			updateClearButton: function() {
 				this.clearButton.style.display = ( this.stats.todoCompleted === 0 ) ? 'none' : 'block';
-				this.clearButton.innerHTML = 'Clear completed (' + this.stats.todoCompleted + ')';
+				this.clearButton.innerHTML = 'Clear completed';
 			},
 
 			updateTodoCount: function() {

examples/ractive/index.html

@@ -63,7 +63,7 @@
 					{{# completedTasks().length }}
 						<!-- When the user clicks this button, the `clearCompleted` event fires -->
 						<button id="clear-completed" on-click="clearCompleted">
-							Clear completed ({{ completedTasks().length }})
+							Clear completed
 						</button>
 					{{/ end of filter }}
 				</footer>

examples/ractive/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/react-backbone/js/footer.jsx

@@ -21,7 +21,7 @@ var app = app || {};
 					<button
 						id="clear-completed"
 						onClick={this.props.onClearCompleted}>
-						Clear completed ({this.props.completedCount})
+						Clear completed
 					</button>
 				);
 			}

examples/react-backbone/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/react/js/footer.jsx

@@ -18,7 +18,7 @@ var app = app || {};
 					<button
 						id="clear-completed"
 						onClick={this.props.onClearCompleted}>
-						Clear completed ({this.props.completedCount})
+						Clear completed
 					</button>
 				);
 			}

examples/react/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/sammyjs/templates/footer.template

@@ -12,4 +12,4 @@
 		<a <%= flag === 'completed' ? 'class=selected' : '' %> href="#/completed">Completed</a>
 	</li>
 </ul>
-<button id="clear-completed" <%= completedCount === 0 ? 'class=hidden' : '' %>>Clear completed (<%= completedCount %>)</button>
+<button id="clear-completed" <%= completedCount === 0 ? 'class=hidden' : '' %>>Clear completed</button>

examples/serenadejs/index.html

@@ -40,7 +40,7 @@
 								a.completed[class:selected=@filterCompleted href="#/completed"] "Completed"
 						- if @completedCount
 							button#clear-completed[event:click=clearCompleted]
-								"Clear completed (" @completedCount ")"
+								"Clear completed"
 		</script>
 
 		<script id="todo" type="text/serenade">

examples/serenadejs/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/socketstream/client/templates/footer.html

@@ -13,5 +13,5 @@
 	</li>
 </ul>
 {{#completedTodos}}
-<button id="clear-completed">Clear completed ({{completedTodos}})</button>
+<button id="clear-completed">Clear completed</button>
 {{/completedTodos}}

examples/somajs/index.html

@@ -46,7 +46,7 @@
 						<a class="{{highlightFilter('completed')}}" href="#/completed">Completed</a>
 					</li>
 				</ul>
-				<button id="clear-completed" data-show="{{clearCompletedVisible()}}" data-click="clearCompleted()">Clear completed ({{completed}})</button>
+				<button id="clear-completed" data-show="{{clearCompletedVisible()}}" data-click="clearCompleted()">Clear completed</button>
 			</footer>
 
 		</section>

examples/somajs/node_modules/todomvc-app-css/index.css

@@ -316,20 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	top: 0;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/somajs_require/index.html

@@ -46,7 +46,7 @@
 						<a class="{{highlightFilter('completed')}}" href="#/completed">Completed</a>
 					</li>
 				</ul>
-				<button id="clear-completed" data-show="{{clearCompletedVisible()}}" data-click="clearCompleted()">Clear completed ({{completed}})</button>
+				<button id="clear-completed" data-show="{{clearCompletedVisible()}}" data-click="clearCompleted()">Clear completed</button>
 			</footer>
 
 		</section>

examples/somajs_require/node_modules/todomvc-app-css/index.css

@@ -316,20 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	top: 0;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/spine/js/app.js

-// Generated by CoffeeScript 1.7.1
+// Generated by CoffeeScript 1.9.1
 (function() {
   var TodoApp,
-    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
-    __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+    bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
+    extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
+    hasProp = {}.hasOwnProperty;
 
-  TodoApp = (function(_super) {
+  TodoApp = (function(superClass) {
     var ENTER_KEY;
 
-    __extends(TodoApp, _super);
+    extend(TodoApp, superClass);
 
     ENTER_KEY = 13;
 
@@ -30,10 +30,10 @@
     };
 
     function TodoApp() {
-      this.renderFooter = __bind(this.renderFooter, this);
-      this.toggleElems = __bind(this.toggleElems, this);
-      this.addAll = __bind(this.addAll, this);
-      this.addNew = __bind(this.addNew, this);
+      this.renderFooter = bind(this.renderFooter, this);
+      this.toggleElems = bind(this.toggleElems, this);
+      this.addAll = bind(this.addAll, this);
+      this.addNew = bind(this.addNew, this);
       TodoApp.__super__.constructor.apply(this, arguments);
       Todo.bind('create', this.addNew);
       Todo.bind('refresh change', this.addAll);
@@ -45,7 +45,7 @@
           this.filter = param.filter;
 
           /*
-					TODO: Need to figure out why the route doesn't trigger `change` event
+          				TODO: Need to figure out why the route doesn't trigger `change` event
            */
           Todo.trigger('refresh');
           return this.filters.removeClass('selected').filter("[href='#/" + this.filter + "']").addClass('selected');
@@ -84,23 +84,23 @@
     };
 
     TodoApp.prototype.addAll = function() {
-      var todo, _i, _len, _ref, _results;
+      var i, len, ref, results, todo;
       this.todos.empty();
-      _ref = this.getByFilter();
-      _results = [];
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        todo = _ref[_i];
-        _results.push(this.addNew(todo));
+      ref = this.getByFilter();
+      results = [];
+      for (i = 0, len = ref.length; i < len; i++) {
+        todo = ref[i];
+        results.push(this.addNew(todo));
       }
-      return _results;
+      return results;
     };
 
     TodoApp.prototype.toggleAll = function(e) {
       return Todo.each(function(todo) {
 
         /*
-				TODO: Model updateAttribute sometimes won't stick:
-					https://github.com/maccman/spine/issues/219
+        			TODO: Model updateAttribute sometimes won't stick:
+        				https://github.com/maccman/spine/issues/219
          */
         todo.updateAttribute('completed', e.target.checked);
         return todo.trigger('update', todo);
@@ -133,8 +133,7 @@
       };
       active = Todo.active().length;
       completed = Todo.completed().length;
-      this.count.html("<strong>" + active + "</strong> " + (text(active)) + " left");
-      return this.clearCompleted.text("Clear completed (" + completed + ")");
+      return this.count.html("<strong>" + active + "</strong> " + (text(active)) + " left");
     };
 
     return TodoApp;

examples/spine/js/controllers/todos.js

-// Generated by CoffeeScript 1.7.1
+// Generated by CoffeeScript 1.9.1
 (function() {
-  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
-    __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
+    extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
+    hasProp = {}.hasOwnProperty;
 
-  window.Todos = (function(_super) {
+  window.Todos = (function(superClass) {
     var ENTER_KEY, ESCAPE_KEY, TPL;
 
-    __extends(Todos, _super);
+    extend(Todos, superClass);
 
     ENTER_KEY = 13;
 
@@ -29,7 +29,7 @@
     };
 
     function Todos() {
-      this.render = __bind(this.render, this);
+      this.render = bind(this.render, this);
       Todos.__super__.constructor.apply(this, arguments);
       this.todo.bind('update', this.render);
       this.todo.bind('destroy', this.release);

examples/spine/js/models/todo.js

-// Generated by CoffeeScript 1.7.1
+// Generated by CoffeeScript 1.9.1
 (function() {
-  var __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+  var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
+    hasProp = {}.hasOwnProperty;
 
-  window.Todo = (function(_super) {
-    __extends(Todo, _super);
+  window.Todo = (function(superClass) {
+    extend(Todo, superClass);
 
     function Todo() {
       return Todo.__super__.constructor.apply(this, arguments);
@@ -27,14 +27,14 @@
     };
 
     Todo.destroyCompleted = function() {
-      var todo, _i, _len, _ref, _results;
-      _ref = this.completed();
-      _results = [];
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        todo = _ref[_i];
-        _results.push(todo.destroy());
+      var i, len, ref, results, todo;
+      ref = this.completed();
+      results = [];
+      for (i = 0, len = ref.length; i < len; i++) {
+        todo = ref[i];
+        results.push(todo.destroy());
       }
-      return _results;
+      return results;
     };
 
     return Todo;

examples/spine/node_modules/todomvc-app-css/index.css

@@ -316,20 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	top: 0;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/spine/src/app.coffee

@@ -80,8 +80,6 @@ class TodoApp extends Spine.Controller
 		active = Todo.active().length
 		completed = Todo.completed().length
 		@count.html "<strong>#{ active }</strong> #{ text active } left"
-		@clearCompleted.text "Clear completed (#{ completed })"
-
 
 $ ->
 	new TodoApp el: $('#todoapp')

examples/typescript-angular/index.html

@@ -46,7 +46,7 @@
 						<a ng-class="{selected: location.path() == '/completed'}" href="#/completed">Completed</a>
 					</li>
 				</ul>
-				<button id="clear-completed" ng-click="vm.clearDoneTodos()" ng-show="doneCount">Clear completed ({{doneCount}})</button>
+				<button id="clear-completed" ng-click="vm.clearDoneTodos()" ng-show="doneCount">Clear completed</button>
 			</footer>
 		</section>
 		<footer id="info">

examples/typescript-angular/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/typescript-backbone/index.html

@@ -96,7 +96,7 @@ https://github.com/documentcloud/backbone/blob/master/examples/todos/index.html
 			<% } %>
 			<% if (completed) { %>
 				<span class="todo-clear">
-					<button id="clear-completed">Clear completed (<span class="number-done"><%= completed %></span>)</button>
+					<button id="clear-completed">Clear completed</button>
 				</span>
 			<% } %>
 		</script>

examples/typescript-backbone/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/vanilladart/build/web/dart/app.dart.js

@@ -4312,8 +4312,8 @@ z="<strong>"+x+"</strong> item"
 J.Qy(this.e,z+(x!==1?"s":"")+" left")
 z=this.f
 if(y===0)J.Y(z.style,"none")
-else{J.Y(z.style,"block")
-z.textContent="Clear completed ("+y+")"}this.nW()},
+else J.Y(z.style,"block")
+this.nW()},
 nW:function(){switch(window.location.hash){case"#/active":this.dK()
 break
 case"#/completed":this.bI()

examples/vanilladart/web/dart/TodoApp.dart

@@ -99,7 +99,6 @@ class TodoApp {
       clearCompletedElement.style.display = 'none';
     } else {
       clearCompletedElement.style.display = 'block';
-      clearCompletedElement.text = 'Clear completed ($complete)';
     }
     updateFilter();
   }

examples/vanillajs/js/template.js

@@ -102,7 +102,7 @@
 	 */
 	Template.prototype.clearCompletedButton = function (completedTodos) {
 		if (completedTodos > 0) {
-			return 'Clear completed (' + completedTodos + ')';
+			return 'Clear completed';
 		} else {
 			return '';
 		}

examples/vanillajs/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }
 

examples/vue/index.html

@@ -36,7 +36,7 @@
 					<li><a href="#/completed" v-class="selected: activeFilter == 'completed'">Completed</a></li>
 				</ul>
 				<button id="clear-completed" v-on="click:removeCompleted" v-show="todos.length > remaining">
-					Clear completed ({{todos.length - remaining}})
+					Clear completed
 				</button>
 			</footer>
 		</section>

examples/yui/index.html

@@ -50,7 +50,7 @@
 				</li>
 			</ul>
 			{{#if completed}}
-			<button id="clear-completed">Clear completed ({{completed}})</button>
+			<button id="clear-completed">Clear completed</button>
 			{{/if}}
 		</script>
 		<script src="node_modules/todomvc-common/base.js"></script>

examples/yui/node_modules/todomvc-app-css/index.css

@@ -15,11 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -33,7 +31,6 @@ body {
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 	font-weight: 300;
 }
@@ -83,7 +80,6 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
@@ -102,11 +98,9 @@ input[type="checkbox"] {
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
 	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
 	font-smoothing: antialiased;
 }
 
@@ -191,7 +185,6 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
@@ -323,19 +316,10 @@ html #clear-completed:active {
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
 	position: relative;
 }
 
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
-}
-
-#clear-completed:hover::after {
+#clear-completed:hover {
 	text-decoration: underline;
 }