| OLD | NEW |
| 1 Content-Type: text/plain | 1 Content-Type: text/plain |
| 2 <html lang="en"><head><style shadowcssshim="">style { display: none !important;
} | 2 <html lang="en"><head> |
| 3 </style><style shadowcssshim="">template { display: none; }</style> | |
| 4 <!-- | 3 <!-- |
| 5 This test runs the TodoMVC app, adds a few todos, marks some as done | 4 This test runs the TodoMVC app, adds a few todos, marks some as done |
| 6 programatically, and clicks on a checkbox to mark others via the UI. | 5 programatically, and clicks on a checkbox to mark others via the UI. |
| 7 --> | 6 --> |
| 8 <meta charset="utf-8"> | 7 <meta charset="utf-8"> |
| 9 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| 10 | 9 |
| 11 <link rel="stylesheet" href="../../../web/base.css"> | 10 <link rel="stylesheet" href="../web/base.css"> |
| 12 <script src="../../packages/polymer/testing/testing.js"></script> | 11 <script src="packages/polymer/testing/testing.js"></script> |
| 13 <title>Dart • TodoMVC</title> | 12 <title>Dart • TodoMVC</title> |
| 14 <style>template, | 13 <style>template, |
| 15 thead[template], | 14 thead[template], |
| 16 tbody[template], | 15 tbody[template], |
| 17 tfoot[template], | 16 tfoot[template], |
| 18 th[template], | 17 th[template], |
| 19 tr[template], | 18 tr[template], |
| 20 td[template], | 19 td[template], |
| 21 caption[template], | 20 caption[template], |
| 22 colgroup[template], | 21 colgroup[template], |
| 23 col[template], | 22 col[template], |
| 24 option[template] { | 23 option[template] { |
| 25 display: none; | 24 display: none; |
| 26 }</style></head><body><polymer-element name="todo-row" extends="li" attributes="
todo"> | 25 }</style></head><body><script src="packages/shadow_dom/shadow_dom.min.js"></scri
pt> |
| 26 <script src="packages/browser/interop.js"></script> |
| 27 <polymer-element name="router-options" extends="ul"> |
| 28 <template><content></content></template> |
| 29 |
| 30 </polymer-element><polymer-element name="editable-label" attributes="value"> |
| 31 <template> |
| 32 <template bind="" if="{{!editing}}"> |
| 33 <label class="edit-label" on-double-click="edit">{{value}}</label> |
| 34 </template> |
| 35 <template bind="" if="{{editing}}"> |
| 36 <form on-submit="update"> |
| 37 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> |
| 38 </form> |
| 39 </template> |
| 40 </template> |
| 41 |
| 42 </polymer-element><polymer-element name="todo-row" extends="li" attributes="todo
"> |
| 27 <template> | 43 <template> |
| 28 <style scoped=""> | 44 <style scoped=""> |
| 29 .todo-item { | 45 .todo-item { |
| 30 position: relative; | 46 position: relative; |
| 31 font-size: 24px; | 47 font-size: 24px; |
| 32 border-bottom: 1px dotted #ccc; | 48 border-bottom: 1px dotted #ccc; |
| 33 } | 49 } |
| 34 | 50 |
| 35 .todo-item.editing { | 51 .todo-item.editing { |
| 36 border-bottom: none; | 52 border-bottom: none; |
| (...skipping 98 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 135 } | 151 } |
| 136 } | 152 } |
| 137 </style> | 153 </style> |
| 138 <div class="todo-item"> | 154 <div class="todo-item"> |
| 139 <input class="toggle" type="checkbox" checked="{{todo.done}}"> | 155 <input class="toggle" type="checkbox" checked="{{todo.done}}"> |
| 140 <editable-label id="label" value="{{todo.task}}"></editable-label> | 156 <editable-label id="label" value="{{todo.task}}"></editable-label> |
| 141 <button class="destroy" on-click="removeTodo"></button> | 157 <button class="destroy" on-click="removeTodo"></button> |
| 142 </div> | 158 </div> |
| 143 </template> | 159 </template> |
| 144 | 160 |
| 145 </polymer-element> | 161 </polymer-element><polymer-element name="todo-app"> |
| 146 <polymer-element name="todo-app"> | |
| 147 <template> | 162 <template> |
| 148 <section id="todoapp"> | 163 <section id="todoapp"> |
| 149 <header id="header"> | 164 <header id="header"> |
| 150 <h1 class="title">todos</h1> | 165 <h1 class="title">todos</h1> |
| 151 <form on-submit="addTodo"> | 166 <form on-submit="addTodo"> |
| 152 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> | 167 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> |
| 153 </form> | 168 </form> |
| 154 </header> | 169 </header> |
| 155 <section id="main"> | 170 <section id="main"> |
| 156 <input id="toggle-all" type="checkbox" checked="{{app.allChecked}}"> | 171 <input id="toggle-all" type="checkbox" checked="{{app.allChecked}}"> |
| (...skipping 27 matching lines...) Expand all Loading... |
| 184 Learn more about | 199 Learn more about |
| 185 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We
b Components</a> | 200 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We
b Components</a> |
| 186 or | 201 or |
| 187 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. | 202 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. |
| 188 </p> | 203 </p> |
| 189 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> | 204 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> |
| 190 </footer> | 205 </footer> |
| 191 </template> | 206 </template> |
| 192 | 207 |
| 193 </polymer-element> | 208 </polymer-element> |
| 194 <polymer-element name="router-options" extends="ul"> | |
| 195 <template><content></content></template> | |
| 196 | |
| 197 </polymer-element> | |
| 198 <polymer-element name="editable-label" attributes="value"> | |
| 199 <template> | |
| 200 <template bind="" if="{{!editing}}"> | |
| 201 <label class="edit-label" on-double-click="edit">{{value}}</label> | |
| 202 </template> | |
| 203 <template bind="" if="{{editing}}"> | |
| 204 <form on-submit="update"> | |
| 205 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> | |
| 206 </form> | |
| 207 </template> | |
| 208 </template> | |
| 209 | |
| 210 </polymer-element> | |
| 211 | |
| 212 <todo-app><shadow-root> | 209 <todo-app><shadow-root> |
| 213 <section id="todoapp"> | 210 <section id="todoapp"> |
| 214 <header id="header"> | 211 <header id="header"> |
| 215 <h1 class="title">todos</h1> | 212 <h1 class="title">todos</h1> |
| 216 <form on-submit="addTodo"> | 213 <form on-submit="addTodo"> |
| 217 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> | 214 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> |
| 218 </form> | 215 </form> |
| 219 </header> | 216 </header> |
| 220 <section id="main"> | 217 <section id="main"> |
| 221 <input id="toggle-all" type="checkbox"> | 218 <input id="toggle-all" type="checkbox"> |
| 222 <label for="toggle-all"></label> | 219 <label for="toggle-all"></label> |
| 223 <ul id="todo-list"> | 220 <ul id="todo-list"> |
| 224 <template repeat="{{app.visibleTodos}}"></template> | 221 <template repeat="{{app.visibleTodos}}"></template> |
| 225 <li is="todo-row" todo="{{}}"><shadow-root> | 222 <li is="todo-row" todo="{{}}"><shadow-root> |
| 226 <style scoped="">todo-row .todo-item, [is=todo-row] .todo-item { | 223 <style scoped="">/* style hidden by testing.js */</style> |
| 227 » position: relative; font-size: 24px; border-bottom-width: 1px; border-bo
ttom-style: dotted; border-bottom-color: rgb(204, 204, 204); | |
| 228 } | |
| 229 | |
| 230 todo-row .todo-item.editing, [is=todo-row] .todo-item.editing { | |
| 231 » border-bottom-style: none; padding: 0px; | |
| 232 } | |
| 233 | |
| 234 todo-row .todo-item.completed [is="editable-label"], [is=todo-row] .todo-item.co
mpleted [is="editable-label"] { | |
| 235 » color: rgb(169, 169, 169); text-decoration: line-through; | |
| 236 } | |
| 237 | |
| 238 todo-row .todo-item .toggle, [is=todo-row] .todo-item .toggle { | |
| 239 » text-align: center; width: 40px; height: auto; position: absolute; top:
0px; bottom: 0px; margin: auto 0px; border: none; -webkit-appearance: none; | |
| 240 } | |
| 241 | |
| 242 todo-row .todo-item .toggle::after, [is=todo-row] .todo-item .toggle::after { | |
| 243 » content: '✔'; line-height: 43px; font-size: 20px; color: rgb(217, 217, 2
17); text-shadow: rgb(191, 191, 191) 0px -1px 0px; | |
| 244 } | |
| 245 | |
| 246 todo-row .todo-item .toggle:checked::after, [is=todo-row] .todo-item .toggle:che
cked::after { | |
| 247 » color: rgb(133, 173, 167); text-shadow: rgb(102, 153, 145) 0px 1px 0px;
bottom: 1px; position: relative; | |
| 248 } | |
| 249 | |
| 250 todo-row .todo-item .destroy, [is=todo-row] .todo-item .destroy { | |
| 251 » display: none; position: absolute; top: 0px; right: 10px; bottom: 0px; w
idth: 40px; height: 40px; margin: auto 0px; font-size: 22px; color: rgb(168, 138
, 138); transition: all 0.2s; -webkit-transition: all 0.2s; | |
| 252 } | |
| 253 | |
| 254 todo-row .todo-item .destroy:hover, [is=todo-row] .todo-item .destroy:hover { | |
| 255 » text-shadow: rgb(0, 0, 0) 0px 0px 1px, rgba(199, 107, 107, 0.8) 0px 0px
10px; -webkit-transform: scale(1.3); | |
| 256 } | |
| 257 | |
| 258 todo-row .todo-item .destroy::after, [is=todo-row] .todo-item .destroy::after { | |
| 259 » content: '✖'; | |
| 260 } | |
| 261 | |
| 262 todo-row .todo-item:hover .destroy, [is=todo-row] .todo-item:hover .destroy { | |
| 263 » display: block; | |
| 264 } | |
| 265 | |
| 266 todo-row .todo-item.editing .destroy, [is=todo-row] .todo-item.editing .destroy,
todo-row .todo-item.editing .toggle, [is=todo-row] .todo-item.editing .toggle { | |
| 267 » display: none; | |
| 268 } | |
| 269 | |
| 270 todo-row .todo-item.editing:last-child, [is=todo-row] .todo-item.editing:last-ch
ild { | |
| 271 » margin-bottom: -1px; | |
| 272 } | |
| 273 | |
| 274 @media screen and (-webkit-min-device-pixel-ratio: 0) { | |
| 275 todo-row .todo-item .toggle, [is=todo-row] .todo-item .toggle { | |
| 276 » background-image: none; background-position: initial initial; background
-repeat: initial initial; | |
| 277 } | |
| 278 | |
| 279 todo-row #todo-item .toggle, [is=todo-row] #todo-item .toggle { | |
| 280 » height: 40px; | |
| 281 } | |
| 282 | |
| 283 | |
| 284 } | |
| 285 | |
| 286 </style> | |
| 287 <div class="todo-item"> | 224 <div class="todo-item"> |
| 288 <input class="toggle" type="checkbox"> | 225 <input class="toggle" type="checkbox"> |
| 289 <editable-label id="label" value="{{todo.task}}"><shadow-root> | 226 <editable-label id="label" value="{{todo.task}}"><shadow-root> |
| 290 <template bind="" if="{{!editing}}"></template> | 227 <template bind="" if="{{!editing}}"></template> |
| 291 <label class="edit-label" on-double-click="edit">one (unchecked)</label> | 228 <label class="edit-label" on-double-click="edit">one (unchecked)</label> |
| 292 | 229 |
| 293 <template bind="" if="{{editing}}"></template> | 230 <template bind="" if="{{editing}}"></template> |
| 294 </shadow-root></editable-label> | 231 </shadow-root></editable-label> |
| 295 <button class="destroy" on-click="removeTodo"></button> | 232 <button class="destroy" on-click="removeTodo"></button> |
| 296 </div> | 233 </div> |
| 297 </shadow-root></li> | 234 </shadow-root></li> |
| 298 | 235 |
| 299 <li is="todo-row" todo="{{}}"><shadow-root> | 236 <li is="todo-row" todo="{{}}"><shadow-root> |
| 300 <style scoped="">todo-row .todo-item, [is=todo-row] .todo-item { | 237 <style scoped="">/* style hidden by testing.js */</style> |
| 301 » position: relative; font-size: 24px; border-bottom-width: 1px; border-bo
ttom-style: dotted; border-bottom-color: rgb(204, 204, 204); | |
| 302 } | |
| 303 | |
| 304 todo-row .todo-item.editing, [is=todo-row] .todo-item.editing { | |
| 305 » border-bottom-style: none; padding: 0px; | |
| 306 } | |
| 307 | |
| 308 todo-row .todo-item.completed [is="editable-label"], [is=todo-row] .todo-item.co
mpleted [is="editable-label"] { | |
| 309 » color: rgb(169, 169, 169); text-decoration: line-through; | |
| 310 } | |
| 311 | |
| 312 todo-row .todo-item .toggle, [is=todo-row] .todo-item .toggle { | |
| 313 » text-align: center; width: 40px; height: auto; position: absolute; top:
0px; bottom: 0px; margin: auto 0px; border: none; -webkit-appearance: none; | |
| 314 } | |
| 315 | |
| 316 todo-row .todo-item .toggle::after, [is=todo-row] .todo-item .toggle::after { | |
| 317 » content: '✔'; line-height: 43px; font-size: 20px; color: rgb(217, 217, 2
17); text-shadow: rgb(191, 191, 191) 0px -1px 0px; | |
| 318 } | |
| 319 | |
| 320 todo-row .todo-item .toggle:checked::after, [is=todo-row] .todo-item .toggle:che
cked::after { | |
| 321 » color: rgb(133, 173, 167); text-shadow: rgb(102, 153, 145) 0px 1px 0px;
bottom: 1px; position: relative; | |
| 322 } | |
| 323 | |
| 324 todo-row .todo-item .destroy, [is=todo-row] .todo-item .destroy { | |
| 325 » display: none; position: absolute; top: 0px; right: 10px; bottom: 0px; w
idth: 40px; height: 40px; margin: auto 0px; font-size: 22px; color: rgb(168, 138
, 138); transition: all 0.2s; -webkit-transition: all 0.2s; | |
| 326 } | |
| 327 | |
| 328 todo-row .todo-item .destroy:hover, [is=todo-row] .todo-item .destroy:hover { | |
| 329 » text-shadow: rgb(0, 0, 0) 0px 0px 1px, rgba(199, 107, 107, 0.8) 0px 0px
10px; -webkit-transform: scale(1.3); | |
| 330 } | |
| 331 | |
| 332 todo-row .todo-item .destroy::after, [is=todo-row] .todo-item .destroy::after { | |
| 333 » content: '✖'; | |
| 334 } | |
| 335 | |
| 336 todo-row .todo-item:hover .destroy, [is=todo-row] .todo-item:hover .destroy { | |
| 337 » display: block; | |
| 338 } | |
| 339 | |
| 340 todo-row .todo-item.editing .destroy, [is=todo-row] .todo-item.editing .destroy,
todo-row .todo-item.editing .toggle, [is=todo-row] .todo-item.editing .toggle { | |
| 341 » display: none; | |
| 342 } | |
| 343 | |
| 344 todo-row .todo-item.editing:last-child, [is=todo-row] .todo-item.editing:last-ch
ild { | |
| 345 » margin-bottom: -1px; | |
| 346 } | |
| 347 | |
| 348 @media screen and (-webkit-min-device-pixel-ratio: 0) { | |
| 349 todo-row .todo-item .toggle, [is=todo-row] .todo-item .toggle { | |
| 350 » background-image: none; background-position: initial initial; background
-repeat: initial initial; | |
| 351 } | |
| 352 | |
| 353 todo-row #todo-item .toggle, [is=todo-row] #todo-item .toggle { | |
| 354 » height: 40px; | |
| 355 } | |
| 356 | |
| 357 | |
| 358 } | |
| 359 | |
| 360 </style> | |
| 361 <div class="todo-item"> | 238 <div class="todo-item"> |
| 362 <input class="toggle" type="checkbox"> | 239 <input class="toggle" type="checkbox"> |
| 363 <editable-label id="label" value="{{todo.task}}"><shadow-root> | 240 <editable-label id="label" value="{{todo.task}}"><shadow-root> |
| 364 <template bind="" if="{{!editing}}"></template> | 241 <template bind="" if="{{!editing}}"></template> |
| 365 <label class="edit-label" on-double-click="edit">two (unchecked)</label> | 242 <label class="edit-label" on-double-click="edit">two (unchecked)</label> |
| 366 | 243 |
| 367 <template bind="" if="{{editing}}"></template> | 244 <template bind="" if="{{editing}}"></template> |
| 368 </shadow-root></editable-label> | 245 </shadow-root></editable-label> |
| 369 <button class="destroy" on-click="removeTodo"></button> | 246 <button class="destroy" on-click="removeTodo"></button> |
| 370 </div> | 247 </div> |
| 371 </shadow-root></li> | 248 </shadow-root></li> |
| 372 | 249 |
| 373 <li is="todo-row" todo="{{}}"><shadow-root> | 250 <li is="todo-row" todo="{{}}"><shadow-root> |
| 374 <style scoped="">todo-row .todo-item, [is=todo-row] .todo-item { | 251 <style scoped="">/* style hidden by testing.js */</style> |
| 375 » position: relative; font-size: 24px; border-bottom-width: 1px; border-bo
ttom-style: dotted; border-bottom-color: rgb(204, 204, 204); | |
| 376 } | |
| 377 | |
| 378 todo-row .todo-item.editing, [is=todo-row] .todo-item.editing { | |
| 379 » border-bottom-style: none; padding: 0px; | |
| 380 } | |
| 381 | |
| 382 todo-row .todo-item.completed [is="editable-label"], [is=todo-row] .todo-item.co
mpleted [is="editable-label"] { | |
| 383 » color: rgb(169, 169, 169); text-decoration: line-through; | |
| 384 } | |
| 385 | |
| 386 todo-row .todo-item .toggle, [is=todo-row] .todo-item .toggle { | |
| 387 » text-align: center; width: 40px; height: auto; position: absolute; top:
0px; bottom: 0px; margin: auto 0px; border: none; -webkit-appearance: none; | |
| 388 } | |
| 389 | |
| 390 todo-row .todo-item .toggle::after, [is=todo-row] .todo-item .toggle::after { | |
| 391 » content: '✔'; line-height: 43px; font-size: 20px; color: rgb(217, 217, 2
17); text-shadow: rgb(191, 191, 191) 0px -1px 0px; | |
| 392 } | |
| 393 | |
| 394 todo-row .todo-item .toggle:checked::after, [is=todo-row] .todo-item .toggle:che
cked::after { | |
| 395 » color: rgb(133, 173, 167); text-shadow: rgb(102, 153, 145) 0px 1px 0px;
bottom: 1px; position: relative; | |
| 396 } | |
| 397 | |
| 398 todo-row .todo-item .destroy, [is=todo-row] .todo-item .destroy { | |
| 399 » display: none; position: absolute; top: 0px; right: 10px; bottom: 0px; w
idth: 40px; height: 40px; margin: auto 0px; font-size: 22px; color: rgb(168, 138
, 138); transition: all 0.2s; -webkit-transition: all 0.2s; | |
| 400 } | |
| 401 | |
| 402 todo-row .todo-item .destroy:hover, [is=todo-row] .todo-item .destroy:hover { | |
| 403 » text-shadow: rgb(0, 0, 0) 0px 0px 1px, rgba(199, 107, 107, 0.8) 0px 0px
10px; -webkit-transform: scale(1.3); | |
| 404 } | |
| 405 | |
| 406 todo-row .todo-item .destroy::after, [is=todo-row] .todo-item .destroy::after { | |
| 407 » content: '✖'; | |
| 408 } | |
| 409 | |
| 410 todo-row .todo-item:hover .destroy, [is=todo-row] .todo-item:hover .destroy { | |
| 411 » display: block; | |
| 412 } | |
| 413 | |
| 414 todo-row .todo-item.editing .destroy, [is=todo-row] .todo-item.editing .destroy,
todo-row .todo-item.editing .toggle, [is=todo-row] .todo-item.editing .toggle { | |
| 415 » display: none; | |
| 416 } | |
| 417 | |
| 418 todo-row .todo-item.editing:last-child, [is=todo-row] .todo-item.editing:last-ch
ild { | |
| 419 » margin-bottom: -1px; | |
| 420 } | |
| 421 | |
| 422 @media screen and (-webkit-min-device-pixel-ratio: 0) { | |
| 423 todo-row .todo-item .toggle, [is=todo-row] .todo-item .toggle { | |
| 424 » background-image: none; background-position: initial initial; background
-repeat: initial initial; | |
| 425 } | |
| 426 | |
| 427 todo-row #todo-item .toggle, [is=todo-row] #todo-item .toggle { | |
| 428 » height: 40px; | |
| 429 } | |
| 430 | |
| 431 | |
| 432 } | |
| 433 | |
| 434 </style> | |
| 435 <div class="todo-item completed"> | 252 <div class="todo-item completed"> |
| 436 <input class="toggle" type="checkbox"> | 253 <input class="toggle" type="checkbox"> |
| 437 <editable-label id="label" value="{{todo.task}}"><shadow-root> | 254 <editable-label id="label" value="{{todo.task}}"><shadow-root> |
| 438 <template bind="" if="{{!editing}}"></template> | 255 <template bind="" if="{{!editing}}"></template> |
| 439 <label class="edit-label" on-double-click="edit">three (checked)</label> | 256 <label class="edit-label" on-double-click="edit">three (checked)</label> |
| 440 | 257 |
| 441 <template bind="" if="{{editing}}"></template> | 258 <template bind="" if="{{editing}}"></template> |
| 442 </shadow-root></editable-label> | 259 </shadow-root></editable-label> |
| 443 <button class="destroy" on-click="removeTodo"></button> | 260 <button class="destroy" on-click="removeTodo"></button> |
| 444 </div> | 261 </div> |
| 445 </shadow-root></li> | 262 </shadow-root></li> |
| 446 | 263 |
| 447 <li is="todo-row" todo="{{}}"><shadow-root> | 264 <li is="todo-row" todo="{{}}"><shadow-root> |
| 448 <style scoped="">todo-row .todo-item, [is=todo-row] .todo-item { | 265 <style scoped="">/* style hidden by testing.js */</style> |
| 449 » position: relative; font-size: 24px; border-bottom-width: 1px; border-bo
ttom-style: dotted; border-bottom-color: rgb(204, 204, 204); | |
| 450 } | |
| 451 | |
| 452 todo-row .todo-item.editing, [is=todo-row] .todo-item.editing { | |
| 453 » border-bottom-style: none; padding: 0px; | |
| 454 } | |
| 455 | |
| 456 todo-row .todo-item.completed [is="editable-label"], [is=todo-row] .todo-item.co
mpleted [is="editable-label"] { | |
| 457 » color: rgb(169, 169, 169); text-decoration: line-through; | |
| 458 } | |
| 459 | |
| 460 todo-row .todo-item .toggle, [is=todo-row] .todo-item .toggle { | |
| 461 » text-align: center; width: 40px; height: auto; position: absolute; top:
0px; bottom: 0px; margin: auto 0px; border: none; -webkit-appearance: none; | |
| 462 } | |
| 463 | |
| 464 todo-row .todo-item .toggle::after, [is=todo-row] .todo-item .toggle::after { | |
| 465 » content: '✔'; line-height: 43px; font-size: 20px; color: rgb(217, 217, 2
17); text-shadow: rgb(191, 191, 191) 0px -1px 0px; | |
| 466 } | |
| 467 | |
| 468 todo-row .todo-item .toggle:checked::after, [is=todo-row] .todo-item .toggle:che
cked::after { | |
| 469 » color: rgb(133, 173, 167); text-shadow: rgb(102, 153, 145) 0px 1px 0px;
bottom: 1px; position: relative; | |
| 470 } | |
| 471 | |
| 472 todo-row .todo-item .destroy, [is=todo-row] .todo-item .destroy { | |
| 473 » display: none; position: absolute; top: 0px; right: 10px; bottom: 0px; w
idth: 40px; height: 40px; margin: auto 0px; font-size: 22px; color: rgb(168, 138
, 138); transition: all 0.2s; -webkit-transition: all 0.2s; | |
| 474 } | |
| 475 | |
| 476 todo-row .todo-item .destroy:hover, [is=todo-row] .todo-item .destroy:hover { | |
| 477 » text-shadow: rgb(0, 0, 0) 0px 0px 1px, rgba(199, 107, 107, 0.8) 0px 0px
10px; -webkit-transform: scale(1.3); | |
| 478 } | |
| 479 | |
| 480 todo-row .todo-item .destroy::after, [is=todo-row] .todo-item .destroy::after { | |
| 481 » content: '✖'; | |
| 482 } | |
| 483 | |
| 484 todo-row .todo-item:hover .destroy, [is=todo-row] .todo-item:hover .destroy { | |
| 485 » display: block; | |
| 486 } | |
| 487 | |
| 488 todo-row .todo-item.editing .destroy, [is=todo-row] .todo-item.editing .destroy,
todo-row .todo-item.editing .toggle, [is=todo-row] .todo-item.editing .toggle { | |
| 489 » display: none; | |
| 490 } | |
| 491 | |
| 492 todo-row .todo-item.editing:last-child, [is=todo-row] .todo-item.editing:last-ch
ild { | |
| 493 » margin-bottom: -1px; | |
| 494 } | |
| 495 | |
| 496 @media screen and (-webkit-min-device-pixel-ratio: 0) { | |
| 497 todo-row .todo-item .toggle, [is=todo-row] .todo-item .toggle { | |
| 498 » background-image: none; background-position: initial initial; background
-repeat: initial initial; | |
| 499 } | |
| 500 | |
| 501 todo-row #todo-item .toggle, [is=todo-row] #todo-item .toggle { | |
| 502 » height: 40px; | |
| 503 } | |
| 504 | |
| 505 | |
| 506 } | |
| 507 | |
| 508 </style> | |
| 509 <div class="todo-item completed"> | 266 <div class="todo-item completed"> |
| 510 <input class="toggle" type="checkbox"> | 267 <input class="toggle" type="checkbox"> |
| 511 <editable-label id="label" value="{{todo.task}}"><shadow-root> | 268 <editable-label id="label" value="{{todo.task}}"><shadow-root> |
| 512 <template bind="" if="{{!editing}}"></template> | 269 <template bind="" if="{{!editing}}"></template> |
| 513 <label class="edit-label" on-double-click="edit">four (checked)</label> | 270 <label class="edit-label" on-double-click="edit">four (checked)</label> |
| 514 | 271 |
| 515 <template bind="" if="{{editing}}"></template> | 272 <template bind="" if="{{editing}}"></template> |
| 516 </shadow-root></editable-label> | 273 </shadow-root></editable-label> |
| 517 <button class="destroy" on-click="removeTodo"></button> | 274 <button class="destroy" on-click="removeTodo"></button> |
| 518 </div> | 275 </div> |
| (...skipping 25 matching lines...) Expand all Loading... |
| 544 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We
b Components</a> | 301 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We
b Components</a> |
| 545 or | 302 or |
| 546 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. | 303 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. |
| 547 </p> | 304 </p> |
| 548 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> | 305 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> |
| 549 </footer> | 306 </footer> |
| 550 </shadow-root></todo-app> | 307 </shadow-root></todo-app> |
| 551 | 308 |
| 552 | 309 |
| 553 | 310 |
| 554 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s
cript> | |
| 555 <script type="text/javascript" src="packages/browser/interop.js"></script> | |
| 556 <script type="application/dart" src="todomvc_markdone_test.html_bootstrap.dart">
</script></body></html> | 311 <script type="application/dart" src="todomvc_markdone_test.html_bootstrap.dart">
</script></body></html> |
| OLD | NEW |