| 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 76013002:
"Reverting 30387" -- failures on IE (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart