| OLD | NEW |
|---|
| (Empty) |
| 1 <!-- | |
| 2 Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file | |
| 3 for details. All rights reserved. Use of this source code is governed by a | |
| 4 BSD-style license that can be found in the LICENSE file. | |
| 5 --> | |
| 6 <meta charset="utf-8"> | |
| 7 <link rel="import" href="editable_label.html"> | |
| 8 <polymer-element name="todo-row" extends="li"> | |
| 9 <template> | |
| 10 <style> | |
| 11 .todo-item { | |
| 12 position: relative; | |
| 13 font-size: 24px; | |
| 14 border-bottom: 1px dotted #ccc; | |
| 15 } | |
| 16 | |
| 17 .todo-item.editing { | |
| 18 border-bottom: none; | |
| 19 padding: 0; | |
| 20 } | |
| 21 | |
| 22 /* | |
| 23 TODO(jmesserly): the ".todo-item label" selector does not work with real | |
| 24 ShadowRoot because it crosses the shadow boundary. | |
| 25 */ | |
| 26 .todo-item.completed [is=editable-label] { | |
| 27 color: #a9a9a9; | |
| 28 text-decoration: line-through; | |
| 29 } | |
| 30 | |
| 31 .todo-item .toggle { | |
| 32 text-align: center; | |
| 33 width: 40px; | |
| 34 /* auto, since non-WebKit browsers don't support input styling */ | |
| 35 height: auto; | |
| 36 position: absolute; | |
| 37 top: 0; | |
| 38 bottom: 0; | |
| 39 margin: auto 0; | |
| 40 border: none; /* Mobile Safari */ | |
| 41 -webkit-appearance: none; | |
| 42 /*-moz-appearance: none;*/ | |
| 43 -ms-appearance: none; | |
| 44 -o-appearance: none; | |
| 45 appearance: none; | |
| 46 } | |
| 47 | |
| 48 .todo-item .toggle:after { | |
| 49 content: '✔'; | |
| 50 line-height: 43px; /* 40 + a couple of pixels visual adjustment */ | |
| 51 font-size: 20px; | |
| 52 color: #d9d9d9; | |
| 53 text-shadow: 0 -1px 0 #bfbfbf; | |
| 54 } | |
| 55 | |
| 56 .todo-item .toggle:checked:after { | |
| 57 color: #85ada7; | |
| 58 text-shadow: 0 1px 0 #669991; | |
| 59 bottom: 1px; | |
| 60 position: relative; | |
| 61 } | |
| 62 .todo-item .destroy { | |
| 63 display: none; | |
| 64 position: absolute; | |
| 65 top: 0; | |
| 66 right: 10px; | |
| 67 bottom: 0; | |
| 68 width: 40px; | |
| 69 height: 40px; | |
| 70 margin: auto 0; | |
| 71 font-size: 22px; | |
| 72 color: #a88a8a; | |
| 73 -webkit-transition: all 0.2s; | |
| 74 -moz-transition: all 0.2s; | |
| 75 -ms-transition: all 0.2s; | |
| 76 -o-transition: all 0.2s; | |
| 77 transition: all 0.2s; | |
| 78 } | |
| 79 | |
| 80 .todo-item .destroy:hover { | |
| 81 text-shadow: 0 0 1px #000, | |
| 82 0 0 10px rgba(199, 107, 107, 0.8); | |
| 83 -webkit-transform: scale(1.3); | |
| 84 -moz-transform: scale(1.3); | |
| 85 -ms-transform: scale(1.3); | |
| 86 -o-transform: scale(1.3); | |
| 87 transform: scale(1.3); | |
| 88 } | |
| 89 | |
| 90 .todo-item .destroy:after { | |
| 91 content: '✖'; | |
| 92 } | |
| 93 | |
| 94 .todo-item:hover .destroy { | |
| 95 display: block; | |
| 96 } | |
| 97 | |
| 98 .todo-item.editing .destroy, | |
| 99 .todo-item.editing .toggle { | |
| 100 display: none; | |
| 101 } | |
| 102 | |
| 103 .todo-item.editing:last-child { | |
| 104 margin-bottom: -1px; | |
| 105 } | |
| 106 | |
| 107 /* | |
| 108 Hack to remove background from Mobile Safari. | |
| 109 Can't use it globally since it destroys checkboxes in Firefox and Opera | |
| 110 */ | |
| 111 @media screen and (-webkit-min-device-pixel-ratio:0) { | |
| 112 .todo-item .toggle { | |
| 113 background: none; | |
| 114 } | |
| 115 #todo-item .toggle { | |
| 116 height: 40px; | |
| 117 } | |
| 118 } | |
| 119 </style> | |
| 120 <div class="todo-item"> | |
| 121 <input class="toggle" type="checkbox" checked="{{todo.done}}"> | |
| 122 <editable-label id="label" value="{{todo.task}}"></editable-label> | |
| 123 <button class="destroy" on-click="{{removeTodo}}"></button> | |
| 124 </div> | |
| 125 </template> | |
| 126 <script type="application/dart" src="todo_row.dart"></script> | |
| 127 </polymer-element> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 60353013:
Update TodoMVC based on https://github.com/polymer/todomvc (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart