Merge pull request #1127 from olaf-k/css_update

Fixes #1120 - Update of tpl.css to match current style

examples/ariatemplates/js/view/TodoStyle.tpl.css

@@ -5,6 +5,31 @@
 
 {macro main ()}
 
+#label-toggle-all {
+	display: none;
+}
+
+.toggle-all {
+	position: absolute;
+	top: -55px;
+	left: -12px;
+	width: 60px;
+	height: 34px;
+	text-align: center;
+	border: none; /* Mobile Safari */
+}
+
+.toggle-all:before {
+	content: '❯';
+	font-size: 22px;
+	color: #e6e6e6;
+	padding: 10px 27px 10px 27px;
+}
+
+.toggle-all:checked:before {
+	color: #737373;
+}
+
 .todo-list {
 	margin: 0;
 	padding: 0;
@@ -14,16 +39,27 @@
 .todo-list li {
 	position: relative;
 	font-size: 24px;
-	border-bottom: 1px dotted #ccc;
+	border-bottom: 1px solid #ededed;
 }
 
 .todo-list li:last-child {
 	border-bottom: none;
 }
 
-.todo-list li.completed label {
-	color: #a9a9a9;
-	text-decoration: line-through;
+.todo-list li.editing {
+	border-bottom: none;
+	padding: 0;
+}
+
+.todo-list li.editing .edit {
+	display: block;
+	width: 506px;
+	padding: 13px 17px 12px 17px;
+	margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+	display: none;
 }
 
 .todo-list li .toggle {
@@ -37,42 +73,30 @@
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	/*-moz-appearance: none;*/
 	-ms-appearance: none;
-	-o-appearance: none;
 	appearance: none;
 }
 
 .todo-list li .toggle:after {
-	content: '✔';
-	line-height: 43px; /* 40 + a couple of pixels visual adjustment */
-	font-size: 20px;
-	color: #d9d9d9;
-	text-shadow: 0 -1px 0 #bfbfbf;
+	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
 }
 
 .todo-list li .toggle:checked:after {
-	color: #85ada7;
-	text-shadow: 0 1px 0 #669991;
-	bottom: 1px;
-	position: relative;
+	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
 }
 
 .todo-list li label {
+	white-space: pre;
 	word-break: break-word;
-	padding: 15px;
+	padding: 15px 60px 15px 15px;
 	margin-left: 45px;
 	display: block;
 	line-height: 1.2;
-	-webkit-transition: color 0.4s;
-	-moz-transition: color 0.4s;
-	-ms-transition: color 0.4s;
-	-o-transition: color 0.4s;
 	transition: color 0.4s;
 }
 
 .todo-list li.completed label {
-	color: #a9a9a9;
+	color: #d9d9d9;
 	text-decoration: line-through;
 }
 
@@ -85,80 +109,66 @@
 	width: 40px;
 	height: 40px;
 	margin: auto 0;
-	font-size: 22px;
-	color: #a88a8a;
-	-webkit-transition: all 0.2s;
-	-moz-transition: all 0.2s;
-	-ms-transition: all 0.2s;
-	-o-transition: all 0.2s;
-	transition: all 0.2s;
+	font-size: 30px;
+	color: #cc9a9a;
+	margin-bottom: 11px;
+	transition: color 0.2s ease-out;
 }
 
 .todo-list li .destroy:hover {
-	text-shadow: 0 0 1px #000,
-				 0 0 10px rgba(199, 107, 107, 0.8);
-	-webkit-transform: scale(1.3);
-	-moz-transform: scale(1.3);
-	-ms-transform: scale(1.3);
-	-o-transform: scale(1.3);
-	transform: scale(1.3);
+	color: #af5b5e;
 }
 
 .todo-list li .destroy:after {
-	content: '✖';
+	content: '×';
 }
 
 .todo-list li:hover .destroy {
 	display: block;
 }
 
+.todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}
+
 .todo-count {
 	float: left;
 	text-align: left;
 }
 
-#label-toggle-all {
-	display: none;
+.todo-count strong {
+	font-weight: 300;
 }
 
-.toggle-all {
+.filters {
+	margin: 0;
+	padding: 0;
+	list-style: none;
 	position: absolute;
-	top: -42px;
-	left: -4px;
-	width: 40px;
-	text-align: center;
-	border: none; /* Mobile Safari */
-}
-
-.toggle-all:before {
-	content: '»';
-	font-size: 28px;
-	color: #d9d9d9;
-	padding: 0 25px 7px;
-}
-
-.toggle-all:checked:before {
-	color: #737373;
+	right: 0;
+	left: 0;
 }
 
-.todo-list li.editing {
-	border-bottom: none;
-	padding: 0;
+.filters li {
+	display: inline;
 }
 
-.todo-list li.editing .edit {
-	display: block;
-	width: 506px;
-	padding: 13px 17px 12px 17px;
-	margin: 0 0 0 43px;
+.filters li a {
+	color: inherit;
+	margin: 3px;
+	padding: 3px 7px;
+	text-decoration: none;
+	border: 1px solid transparent;
+	border-radius: 3px;
 }
 
-.todo-list li.editing .view {
-	display: none;
+.filters li a.selected,
+.filters li a:hover {
+	border-color: rgba(175, 47, 47, 0.1);
 }
 
-.todo-list li.editing:last-child {
-	margin-bottom: -1px;
+.filters li a.selected {
+	border-color: rgba(175, 47, 47, 0.2);
 }
 
 .filter-active li.completed {
@@ -172,29 +182,6 @@
 	display: block
 }
 
-.filters {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-	position: absolute;
-	right: 0;
-	left: 0;
-}
-
-.filters li {
-	display: inline;
-}
-
-.filters li a {
-	color: #83756f;
-	margin: 2px;
-	text-decoration: none;
-}
-
-.filters li a.selected {
-	font-weight: bold;
-}
-
 /*
 	This replaces the original hack to remove background from Mobile Safari.
 */
@@ -210,10 +197,6 @@
 }
 
 .toggle-all {
-	top: -56px;
-	left: -15px;
-	width: 65px;
-	height: 41px;
 	-webkit-transform: rotate(90deg);
 	transform: rotate(90deg);
 	-webkit-appearance: none;
@@ -222,6 +205,12 @@
 
 {/if}
 
+@media (max-width: 430px) {
+	.filters {
+		bottom: 10px;
+	}
+}
+
 {/macro}
 
 {/CSSTemplate}
\ No newline at end of file