| OLD | NEW |
|---|
| 1 Content-Type: text/plain | 1 Content-Type: text/plain |
| 2 <html lang="en"><head><style>template { display: none; }</style> | 2 <html lang="en"><head><style>template { display: none; }</style> |
| 3 <!-- | 3 <!-- |
| 4 This test runs the TodoMVC app, adds a few elements, marks some as done, and | 4 This test runs the TodoMVC app, adds a few elements, marks some as done, and |
| 5 switches from back and forth between "Active" and "All". This will make some | 5 switches from back and forth between "Active" and "All". This will make some |
| 6 nodes to be hidden and readded to the page. | 6 nodes to be hidden and readded to the page. |
| 7 | 7 |
| 8 This is a regression test for a bug in dwc that made the nodes appear in the | 8 This is a regression test for a bug in dwc that made the nodes appear in the |
| 9 wrong order when using lists and ifs together. | 9 wrong order when using lists and ifs together. |
| 10 --> | 10 --> |
| (...skipping 11 matching lines...) Expand all Loading... |
| 22 tr[template], | 22 tr[template], |
| 23 td[template], | 23 td[template], |
| 24 caption[template], | 24 caption[template], |
| 25 colgroup[template], | 25 colgroup[template], |
| 26 col[template], | 26 col[template], |
| 27 option[template] { | 27 option[template] { |
| 28 display: none; | 28 display: none; |
| 29 }</style></head> | 29 }</style></head> |
| 30 <body><polymer-element name="todo-row" extends="li" attributes="todo"> | 30 <body><polymer-element name="todo-row" extends="li" attributes="todo"> |
| 31 <template> | 31 <template> |
| 32 | 32 <style scoped=""> |
| 33 <style> | |
| 34 .todo-item { | 33 .todo-item { |
| 35 position: relative; | 34 position: relative; |
| 36 font-size: 24px; | 35 font-size: 24px; |
| 37 border-bottom: 1px dotted #ccc; | 36 border-bottom: 1px dotted #ccc; |
| 38 } | 37 } |
| 38 |
| 39 .todo-item.editing { | 39 .todo-item.editing { |
| 40 border-bottom: none; | 40 border-bottom: none; |
| 41 padding: 0; | 41 padding: 0; |
| 42 } | 42 } |
| 43 |
| 44 /* |
| 45 TODO(jmesserly): the ".todo-item label" selector does not work with real |
| 46 ShadowRoot because it crosses the shadow boundary. |
| 47 */ |
| 43 .todo-item.completed [is=editable-label] { | 48 .todo-item.completed [is=editable-label] { |
| 44 color: #a9a9a9; | 49 color: #a9a9a9; |
| 45 text-decoration: line-through; | 50 text-decoration: line-through; |
| 46 } | 51 } |
| 52 |
| 47 .todo-item .toggle { | 53 .todo-item .toggle { |
| 48 text-align: center; | 54 text-align: center; |
| 49 width: 40px; | 55 width: 40px; |
| 56 /* auto, since non-WebKit browsers don't support input styling */ |
| 50 height: auto; | 57 height: auto; |
| 51 position: absolute; | 58 position: absolute; |
| 52 top: 0; | 59 top: 0; |
| 53 bottom: 0; | 60 bottom: 0; |
| 54 margin: auto 0; | 61 margin: auto 0; |
| 55 border: none; | 62 border: none; /* Mobile Safari */ |
| 56 -webkit-appearance: none; | 63 -webkit-appearance: none; |
| 64 /*-moz-appearance: none;*/ |
| 57 -ms-appearance: none; | 65 -ms-appearance: none; |
| 58 -o-appearance: none; | 66 -o-appearance: none; |
| 59 appearance: none; | 67 appearance: none; |
| 60 } | 68 } |
| 69 |
| 61 .todo-item .toggle:after { | 70 .todo-item .toggle:after { |
| 62 content: "✔"; | 71 content: '✔'; |
| 63 line-height: 43px; | 72 line-height: 43px; /* 40 + a couple of pixels visual adjustment */ |
| 64 font-size: 20px; | 73 font-size: 20px; |
| 65 color: #d9d9d9; | 74 color: #d9d9d9; |
| 66 text-shadow: 0 -1px 0 #bfbfbf; | 75 text-shadow: 0 -1px 0 #bfbfbf; |
| 67 } | 76 } |
| 77 |
| 68 .todo-item .toggle:checked:after { | 78 .todo-item .toggle:checked:after { |
| 69 color: #85ada7; | 79 color: #85ada7; |
| 70 text-shadow: 0 1px 0 #669991; | 80 text-shadow: 0 1px 0 #669991; |
| 71 bottom: 1px; | 81 bottom: 1px; |
| 72 position: relative; | 82 position: relative; |
| 73 } | 83 } |
| 74 .todo-item .destroy { | 84 .todo-item .destroy { |
| 75 display: none; | 85 display: none; |
| 76 position: absolute; | 86 position: absolute; |
| 77 top: 0; | 87 top: 0; |
| 78 right: 10px; | 88 right: 10px; |
| 79 bottom: 0; | 89 bottom: 0; |
| 80 width: 40px; | 90 width: 40px; |
| 81 height: 40px; | 91 height: 40px; |
| 82 margin: auto 0; | 92 margin: auto 0; |
| 83 font-size: 22px; | 93 font-size: 22px; |
| 84 color: #a88a8a; | 94 color: #a88a8a; |
| 85 -webkit-transition: all 0.2s; | 95 -webkit-transition: all 0.2s; |
| 86 -moz-transition: all 0.2s; | 96 -moz-transition: all 0.2s; |
| 87 -ms-transition: all 0.2s; | 97 -ms-transition: all 0.2s; |
| 88 -o-transition: all 0.2s; | 98 -o-transition: all 0.2s; |
| 89 transition: all 0.2s; | 99 transition: all 0.2s; |
| 90 } | 100 } |
| 101 |
| 91 .todo-item .destroy:hover { | 102 .todo-item .destroy:hover { |
| 92 text-shadow: 0 0 1px #000, 0 0 10px rgba(199, 107, 107, 0.8); | 103 text-shadow: 0 0 1px #000, |
| 104 0 0 10px rgba(199, 107, 107, 0.8); |
| 93 -webkit-transform: scale(1.3); | 105 -webkit-transform: scale(1.3); |
| 94 -moz-transform: scale(1.3); | 106 -moz-transform: scale(1.3); |
| 95 -ms-transform: scale(1.3); | 107 -ms-transform: scale(1.3); |
| 96 -o-transform: scale(1.3); | 108 -o-transform: scale(1.3); |
| 97 transform: scale(1.3); | 109 transform: scale(1.3); |
| 98 } | 110 } |
| 111 |
| 99 .todo-item .destroy:after { | 112 .todo-item .destroy:after { |
| 100 content: "✖"; | 113 content: '✖'; |
| 101 } | 114 } |
| 115 |
| 102 .todo-item:hover .destroy { | 116 .todo-item:hover .destroy { |
| 103 display: block; | 117 display: block; |
| 104 } | 118 } |
| 105 .todo-item.editing .destroy, .todo-item.editing .toggle { | 119 |
| 120 .todo-item.editing .destroy, |
| 121 .todo-item.editing .toggle { |
| 106 display: none; | 122 display: none; |
| 107 } | 123 } |
| 124 |
| 108 .todo-item.editing:last-child { | 125 .todo-item.editing:last-child { |
| 109 margin-bottom: -1px; | 126 margin-bottom: -1px; |
| 110 } @media screen AND (-webkit-min-device-pixel-ratio:0) { | |
| 111 .todo-item .toggle { | |
| 112 background: none; | |
| 113 } | 127 } |
| 114 #todo-item .toggle { | 128 |
| 115 height: 40px; | 129 /* |
| 130 Hack to remove background from Mobile Safari. |
| 131 Can't use it globally since it destroys checkboxes in Firefox and Opera |
| 132 */ |
| 133 @media screen and (-webkit-min-device-pixel-ratio:0) { |
| 134 .todo-item .toggle { |
| 135 background: none; |
| 136 } |
| 137 #todo-item .toggle { |
| 138 height: 40px; |
| 139 } |
| 116 } | 140 } |
| 117 } | 141 </style> |
| 118 </style><div class="todo-item"> | 142 <div class="todo-item"> |
| 119 <input class="toggle" type="checkbox" checked="{{todo.done}}"> | 143 <input class="toggle" type="checkbox" checked="{{todo.done}}"> |
| 120 <div is="editable-label" id="label" value="{{todo.task}}"></div> | 144 <span is="editable-label" id="label" value="{{todo.task}}"></span> |
| 121 <button class="destroy" on-click="removeTodo"></button> | 145 <button class="destroy" on-click="removeTodo"></button> |
| 122 </div> | 146 </div> |
| 123 </template> | 147 </template> |
| 124 | 148 |
| 125 </polymer-element> | 149 </polymer-element> |
| 126 <polymer-element name="todo-app"> | 150 <polymer-element name="todo-app"> |
| 127 <template> | 151 <template> |
| 128 <section id="todoapp"> | 152 <section id="todoapp"> |
| 129 <header id="header"> | 153 <header id="header"> |
| 130 <h1 class="title">todos</h1> | 154 <h1 class="title">todos</h1> |
| 131 <form on-submit="addTodo"> | 155 <form on-submit="addTodo"> |
| 132 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> | 156 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> |
| 133 </form> | 157 </form> |
| 134 </header> | 158 </header> |
| 135 <section id="main"> | 159 <section id="main"> |
| 136 <input id="toggle-all" type="checkbox" checked="{{app.allChecked}}"> | 160 <input id="toggle-all" type="checkbox" checked="{{app.allChecked}}"> |
| 137 <label for="toggle-all"></label> | 161 <label for="toggle-all"></label> |
| 138 <ul id="todo-list"> | 162 <ul id="todo-list"> |
| 139 <template repeat="{{app.visibleTodos}}"> | 163 <template repeat="{{app.visibleTodos}}"> |
| 140 <li is="todo-row" todo="{{}}"></li> | 164 <li is="todo-row" todo="{{}}"></li> |
| 141 </template> | 165 </template> |
| 142 </ul> | 166 </ul> |
| 143 </section> | 167 </section> |
| 144 <template bind="" if="{{app.hasTodos}}"> | 168 <template bind="" if="{{app.todos.length > 0}}"> |
| 145 <footer id="footer"> | 169 <footer id="footer"> |
| 146 <span id="todo-count"><strong>{{app.remaining}}</strong></span> | 170 <span id="todo-count"><strong>{{app.remaining}}</strong></span> |
| 147 <ul is="router-options" id="filters"> | 171 <ul is="router-options" id="filters"> |
| 148 <li> <a href="#/">All</a> </li> | 172 <li> <a href="#/">All</a> </li> |
| 149 <li> <a href="#/active">Active</a> </li> | 173 <li> <a href="#/active">Active</a> </li> |
| 150 <li> <a href="#/completed">Completed</a> </li> | 174 <li> <a href="#/completed">Completed</a> </li> |
| 151 </ul> | 175 </ul> |
| 152 <template bind="" if="{{app.hasCompleteTodos}}"> | 176 <template bind="" if="{{app.hasCompleteTodos}}"> |
| 153 <button id="clear-completed" on-click="clear"> | 177 <button id="clear-completed" on-click="clear"> |
| 154 Clear completed ({{app.doneCount}}) | 178 Clear completed ({{app.doneCount}}) |
| (...skipping 13 matching lines...) Expand all Loading... |
| 168 </p> | 192 </p> |
| 169 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> | 193 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> |
| 170 </footer> | 194 </footer> |
| 171 </template> | 195 </template> |
| 172 | 196 |
| 173 </polymer-element> | 197 </polymer-element> |
| 174 <polymer-element name="router-options" extends="ul"> | 198 <polymer-element name="router-options" extends="ul"> |
| 175 <template><content></content></template> | 199 <template><content></content></template> |
| 176 | 200 |
| 177 </polymer-element> | 201 </polymer-element> |
| 178 <polymer-element name="editable-label" extends="div" attributes="value"> | 202 <polymer-element name="editable-label" attributes="value"> |
| 179 <template> | 203 <template> |
| 180 <template bind="" if="{{notEditing}}"> | 204 <template bind="" if="{{!editing}}"> |
| 181 <label class="edit-label" on-double-click="edit">{{value}}</label> | 205 <label class="edit-label" on-double-click="edit">{{value}}</label> |
| 182 </template> | 206 </template> |
| 183 <template bind="" if="{{editing}}"> | 207 <template bind="" if="{{editing}}"> |
| 184 <form on-submit="update"> | 208 <form on-submit="update"> |
| 185 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> | 209 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> |
| 186 </form> | 210 </form> |
| 187 </template> | 211 </template> |
| 188 </template> | 212 </template> |
| 189 | 213 |
| 190 </polymer-element> | 214 </polymer-element> |
| 191 | 215 |
| 192 <span is="todo-app"><shadow-root> | 216 <span is="todo-app"><shadow-root> |
| 193 <section id="todoapp"> | 217 <section id="todoapp"> |
| 194 <header id="header"> | 218 <header id="header"> |
| 195 <h1 class="title">todos</h1> | 219 <h1 class="title">todos</h1> |
| 196 <form on-submit="addTodo"> | 220 <form on-submit="addTodo"> |
| 197 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> | 221 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> |
| 198 </form> | 222 </form> |
| 199 </header> | 223 </header> |
| 200 <section id="main"> | 224 <section id="main"> |
| 201 <input id="toggle-all" type="checkbox"> | 225 <input id="toggle-all" type="checkbox"> |
| 202 <label for="toggle-all"></label> | 226 <label for="toggle-all"></label> |
| 203 <ul id="todo-list"> | 227 <ul id="todo-list"> |
| 204 <template repeat="{{app.visibleTodos}}"> | 228 <template repeat="{{app.visibleTodos}}"></template> |
| 205 <li is="todo-row" todo="{{}}"></li> | |
| 206 </template> | |
| 207 <li is="todo-row" todo="{{}}"><shadow-root> | 229 <li is="todo-row" todo="{{}}"><shadow-root> |
| 208 | 230 <style scoped=""> |
| 209 <style> | |
| 210 .todo-item { | 231 .todo-item { |
| 211 position: relative; | 232 position: relative; |
| 212 font-size: 24px; | 233 font-size: 24px; |
| 213 border-bottom: 1px dotted #ccc; | 234 border-bottom: 1px dotted #ccc; |
| 214 } | 235 } |
| 236 |
| 215 .todo-item.editing { | 237 .todo-item.editing { |
| 216 border-bottom: none; | 238 border-bottom: none; |
| 217 padding: 0; | 239 padding: 0; |
| 218 } | 240 } |
| 241 |
| 242 /* |
| 243 TODO(jmesserly): the ".todo-item label" selector does not work with real |
| 244 ShadowRoot because it crosses the shadow boundary. |
| 245 */ |
| 219 .todo-item.completed [is=editable-label] { | 246 .todo-item.completed [is=editable-label] { |
| 220 color: #a9a9a9; | 247 color: #a9a9a9; |
| 221 text-decoration: line-through; | 248 text-decoration: line-through; |
| 222 } | 249 } |
| 250 |
| 223 .todo-item .toggle { | 251 .todo-item .toggle { |
| 224 text-align: center; | 252 text-align: center; |
| 225 width: 40px; | 253 width: 40px; |
| 254 /* auto, since non-WebKit browsers don't support input styling */ |
| 226 height: auto; | 255 height: auto; |
| 227 position: absolute; | 256 position: absolute; |
| 228 top: 0; | 257 top: 0; |
| 229 bottom: 0; | 258 bottom: 0; |
| 230 margin: auto 0; | 259 margin: auto 0; |
| 231 border: none; | 260 border: none; /* Mobile Safari */ |
| 232 -webkit-appearance: none; | 261 -webkit-appearance: none; |
| 262 /*-moz-appearance: none;*/ |
| 233 -ms-appearance: none; | 263 -ms-appearance: none; |
| 234 -o-appearance: none; | 264 -o-appearance: none; |
| 235 appearance: none; | 265 appearance: none; |
| 236 } | 266 } |
| 267 |
| 237 .todo-item .toggle:after { | 268 .todo-item .toggle:after { |
| 238 content: "✔"; | 269 content: '✔'; |
| 239 line-height: 43px; | 270 line-height: 43px; /* 40 + a couple of pixels visual adjustment */ |
| 240 font-size: 20px; | 271 font-size: 20px; |
| 241 color: #d9d9d9; | 272 color: #d9d9d9; |
| 242 text-shadow: 0 -1px 0 #bfbfbf; | 273 text-shadow: 0 -1px 0 #bfbfbf; |
| 243 } | 274 } |
| 275 |
| 244 .todo-item .toggle:checked:after { | 276 .todo-item .toggle:checked:after { |
| 245 color: #85ada7; | 277 color: #85ada7; |
| 246 text-shadow: 0 1px 0 #669991; | 278 text-shadow: 0 1px 0 #669991; |
| 247 bottom: 1px; | 279 bottom: 1px; |
| 248 position: relative; | 280 position: relative; |
| 249 } | 281 } |
| 250 .todo-item .destroy { | 282 .todo-item .destroy { |
| 251 display: none; | 283 display: none; |
| 252 position: absolute; | 284 position: absolute; |
| 253 top: 0; | 285 top: 0; |
| 254 right: 10px; | 286 right: 10px; |
| 255 bottom: 0; | 287 bottom: 0; |
| 256 width: 40px; | 288 width: 40px; |
| 257 height: 40px; | 289 height: 40px; |
| 258 margin: auto 0; | 290 margin: auto 0; |
| 259 font-size: 22px; | 291 font-size: 22px; |
| 260 color: #a88a8a; | 292 color: #a88a8a; |
| 261 -webkit-transition: all 0.2s; | 293 -webkit-transition: all 0.2s; |
| 262 -moz-transition: all 0.2s; | 294 -moz-transition: all 0.2s; |
| 263 -ms-transition: all 0.2s; | 295 -ms-transition: all 0.2s; |
| 264 -o-transition: all 0.2s; | 296 -o-transition: all 0.2s; |
| 265 transition: all 0.2s; | 297 transition: all 0.2s; |
| 266 } | 298 } |
| 299 |
| 267 .todo-item .destroy:hover { | 300 .todo-item .destroy:hover { |
| 268 text-shadow: 0 0 1px #000, 0 0 10px rgba(199, 107, 107, 0.8); | 301 text-shadow: 0 0 1px #000, |
| 302 0 0 10px rgba(199, 107, 107, 0.8); |
| 269 -webkit-transform: scale(1.3); | 303 -webkit-transform: scale(1.3); |
| 270 -moz-transform: scale(1.3); | 304 -moz-transform: scale(1.3); |
| 271 -ms-transform: scale(1.3); | 305 -ms-transform: scale(1.3); |
| 272 -o-transform: scale(1.3); | 306 -o-transform: scale(1.3); |
| 273 transform: scale(1.3); | 307 transform: scale(1.3); |
| 274 } | 308 } |
| 309 |
| 275 .todo-item .destroy:after { | 310 .todo-item .destroy:after { |
| 276 content: "✖"; | 311 content: '✖'; |
| 277 } | 312 } |
| 313 |
| 278 .todo-item:hover .destroy { | 314 .todo-item:hover .destroy { |
| 279 display: block; | 315 display: block; |
| 280 } | 316 } |
| 281 .todo-item.editing .destroy, .todo-item.editing .toggle { | 317 |
| 318 .todo-item.editing .destroy, |
| 319 .todo-item.editing .toggle { |
| 282 display: none; | 320 display: none; |
| 283 } | 321 } |
| 322 |
| 284 .todo-item.editing:last-child { | 323 .todo-item.editing:last-child { |
| 285 margin-bottom: -1px; | 324 margin-bottom: -1px; |
| 286 } @media screen AND (-webkit-min-device-pixel-ratio:0) { | |
| 287 .todo-item .toggle { | |
| 288 background: none; | |
| 289 } | 325 } |
| 290 #todo-item .toggle { | 326 |
| 291 height: 40px; | 327 /* |
| 328 Hack to remove background from Mobile Safari. |
| 329 Can't use it globally since it destroys checkboxes in Firefox and Opera |
| 330 */ |
| 331 @media screen and (-webkit-min-device-pixel-ratio:0) { |
| 332 .todo-item .toggle { |
| 333 background: none; |
| 334 } |
| 335 #todo-item .toggle { |
| 336 height: 40px; |
| 337 } |
| 292 } | 338 } |
| 293 } | 339 </style> |
| 294 </style><div class="todo-item"> | 340 <div class="todo-item"> |
| 295 <input class="toggle" type="checkbox"> | 341 <input class="toggle" type="checkbox"> |
| 296 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root> | 342 <span is="editable-label" id="label" value="{{todo.task}}"><shadow-root> |
| 297 <template bind="" if="{{notEditing}}"> | 343 <template bind="" if="{{!editing}}"></template> |
| 298 <label class="edit-label" on-double-click="edit">{{value}}</label> | |
| 299 </template> | |
| 300 <label class="edit-label" on-double-click="edit">one (unchecked)</label> | 344 <label class="edit-label" on-double-click="edit">one (unchecked)</label> |
| 301 | 345 |
| 302 <template bind="" if="{{editing}}"> | 346 <template bind="" if="{{editing}}"></template> |
| 303 <form on-submit="update"> | 347 </shadow-root></span> |
| 304 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> | |
| 305 </form> | |
| 306 </template> | |
| 307 </shadow-root></div> | |
| 308 <button class="destroy" on-click="removeTodo"></button> | 348 <button class="destroy" on-click="removeTodo"></button> |
| 309 </div> | 349 </div> |
| 310 </shadow-root></li> | 350 </shadow-root></li> |
| 311 | 351 |
| 312 <li is="todo-row" todo="{{}}"><shadow-root> | 352 <li is="todo-row" todo="{{}}"><shadow-root> |
| 313 | 353 <style scoped=""> |
| 314 <style> | |
| 315 .todo-item { | 354 .todo-item { |
| 316 position: relative; | 355 position: relative; |
| 317 font-size: 24px; | 356 font-size: 24px; |
| 318 border-bottom: 1px dotted #ccc; | 357 border-bottom: 1px dotted #ccc; |
| 319 } | 358 } |
| 359 |
| 320 .todo-item.editing { | 360 .todo-item.editing { |
| 321 border-bottom: none; | 361 border-bottom: none; |
| 322 padding: 0; | 362 padding: 0; |
| 323 } | 363 } |
| 364 |
| 365 /* |
| 366 TODO(jmesserly): the ".todo-item label" selector does not work with real |
| 367 ShadowRoot because it crosses the shadow boundary. |
| 368 */ |
| 324 .todo-item.completed [is=editable-label] { | 369 .todo-item.completed [is=editable-label] { |
| 325 color: #a9a9a9; | 370 color: #a9a9a9; |
| 326 text-decoration: line-through; | 371 text-decoration: line-through; |
| 327 } | 372 } |
| 373 |
| 328 .todo-item .toggle { | 374 .todo-item .toggle { |
| 329 text-align: center; | 375 text-align: center; |
| 330 width: 40px; | 376 width: 40px; |
| 377 /* auto, since non-WebKit browsers don't support input styling */ |
| 331 height: auto; | 378 height: auto; |
| 332 position: absolute; | 379 position: absolute; |
| 333 top: 0; | 380 top: 0; |
| 334 bottom: 0; | 381 bottom: 0; |
| 335 margin: auto 0; | 382 margin: auto 0; |
| 336 border: none; | 383 border: none; /* Mobile Safari */ |
| 337 -webkit-appearance: none; | 384 -webkit-appearance: none; |
| 385 /*-moz-appearance: none;*/ |
| 338 -ms-appearance: none; | 386 -ms-appearance: none; |
| 339 -o-appearance: none; | 387 -o-appearance: none; |
| 340 appearance: none; | 388 appearance: none; |
| 341 } | 389 } |
| 390 |
| 342 .todo-item .toggle:after { | 391 .todo-item .toggle:after { |
| 343 content: "✔"; | 392 content: '✔'; |
| 344 line-height: 43px; | 393 line-height: 43px; /* 40 + a couple of pixels visual adjustment */ |
| 345 font-size: 20px; | 394 font-size: 20px; |
| 346 color: #d9d9d9; | 395 color: #d9d9d9; |
| 347 text-shadow: 0 -1px 0 #bfbfbf; | 396 text-shadow: 0 -1px 0 #bfbfbf; |
| 348 } | 397 } |
| 398 |
| 349 .todo-item .toggle:checked:after { | 399 .todo-item .toggle:checked:after { |
| 350 color: #85ada7; | 400 color: #85ada7; |
| 351 text-shadow: 0 1px 0 #669991; | 401 text-shadow: 0 1px 0 #669991; |
| 352 bottom: 1px; | 402 bottom: 1px; |
| 353 position: relative; | 403 position: relative; |
| 354 } | 404 } |
| 355 .todo-item .destroy { | 405 .todo-item .destroy { |
| 356 display: none; | 406 display: none; |
| 357 position: absolute; | 407 position: absolute; |
| 358 top: 0; | 408 top: 0; |
| 359 right: 10px; | 409 right: 10px; |
| 360 bottom: 0; | 410 bottom: 0; |
| 361 width: 40px; | 411 width: 40px; |
| 362 height: 40px; | 412 height: 40px; |
| 363 margin: auto 0; | 413 margin: auto 0; |
| 364 font-size: 22px; | 414 font-size: 22px; |
| 365 color: #a88a8a; | 415 color: #a88a8a; |
| 366 -webkit-transition: all 0.2s; | 416 -webkit-transition: all 0.2s; |
| 367 -moz-transition: all 0.2s; | 417 -moz-transition: all 0.2s; |
| 368 -ms-transition: all 0.2s; | 418 -ms-transition: all 0.2s; |
| 369 -o-transition: all 0.2s; | 419 -o-transition: all 0.2s; |
| 370 transition: all 0.2s; | 420 transition: all 0.2s; |
| 371 } | 421 } |
| 422 |
| 372 .todo-item .destroy:hover { | 423 .todo-item .destroy:hover { |
| 373 text-shadow: 0 0 1px #000, 0 0 10px rgba(199, 107, 107, 0.8); | 424 text-shadow: 0 0 1px #000, |
| 425 0 0 10px rgba(199, 107, 107, 0.8); |
| 374 -webkit-transform: scale(1.3); | 426 -webkit-transform: scale(1.3); |
| 375 -moz-transform: scale(1.3); | 427 -moz-transform: scale(1.3); |
| 376 -ms-transform: scale(1.3); | 428 -ms-transform: scale(1.3); |
| 377 -o-transform: scale(1.3); | 429 -o-transform: scale(1.3); |
| 378 transform: scale(1.3); | 430 transform: scale(1.3); |
| 379 } | 431 } |
| 432 |
| 380 .todo-item .destroy:after { | 433 .todo-item .destroy:after { |
| 381 content: "✖"; | 434 content: '✖'; |
| 382 } | 435 } |
| 436 |
| 383 .todo-item:hover .destroy { | 437 .todo-item:hover .destroy { |
| 384 display: block; | 438 display: block; |
| 385 } | 439 } |
| 386 .todo-item.editing .destroy, .todo-item.editing .toggle { | 440 |
| 441 .todo-item.editing .destroy, |
| 442 .todo-item.editing .toggle { |
| 387 display: none; | 443 display: none; |
| 388 } | 444 } |
| 445 |
| 389 .todo-item.editing:last-child { | 446 .todo-item.editing:last-child { |
| 390 margin-bottom: -1px; | 447 margin-bottom: -1px; |
| 391 } @media screen AND (-webkit-min-device-pixel-ratio:0) { | |
| 392 .todo-item .toggle { | |
| 393 background: none; | |
| 394 } | 448 } |
| 395 #todo-item .toggle { | 449 |
| 396 height: 40px; | 450 /* |
| 451 Hack to remove background from Mobile Safari. |
| 452 Can't use it globally since it destroys checkboxes in Firefox and Opera |
| 453 */ |
| 454 @media screen and (-webkit-min-device-pixel-ratio:0) { |
| 455 .todo-item .toggle { |
| 456 background: none; |
| 457 } |
| 458 #todo-item .toggle { |
| 459 height: 40px; |
| 460 } |
| 397 } | 461 } |
| 398 } | 462 </style> |
| 399 </style><div class="todo-item completed"> | 463 <div class="todo-item completed"> |
| 400 <input class="toggle" type="checkbox"> | 464 <input class="toggle" type="checkbox"> |
| 401 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root> | 465 <span is="editable-label" id="label" value="{{todo.task}}"><shadow-root> |
| 402 <template bind="" if="{{notEditing}}"> | 466 <template bind="" if="{{!editing}}"></template> |
| 403 <label class="edit-label" on-double-click="edit">{{value}}</label> | |
| 404 </template> | |
| 405 <label class="edit-label" on-double-click="edit">two (checked)</label> | 467 <label class="edit-label" on-double-click="edit">two (checked)</label> |
| 406 | 468 |
| 407 <template bind="" if="{{editing}}"> | 469 <template bind="" if="{{editing}}"></template> |
| 408 <form on-submit="update"> | 470 </shadow-root></span> |
| 409 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> | |
| 410 </form> | |
| 411 </template> | |
| 412 </shadow-root></div> | |
| 413 <button class="destroy" on-click="removeTodo"></button> | 471 <button class="destroy" on-click="removeTodo"></button> |
| 414 </div> | 472 </div> |
| 415 </shadow-root></li> | 473 </shadow-root></li> |
| 416 | 474 |
| 417 <li is="todo-row" todo="{{}}"><shadow-root> | 475 <li is="todo-row" todo="{{}}"><shadow-root> |
| 418 | 476 <style scoped=""> |
| 419 <style> | |
| 420 .todo-item { | 477 .todo-item { |
| 421 position: relative; | 478 position: relative; |
| 422 font-size: 24px; | 479 font-size: 24px; |
| 423 border-bottom: 1px dotted #ccc; | 480 border-bottom: 1px dotted #ccc; |
| 424 } | 481 } |
| 482 |
| 425 .todo-item.editing { | 483 .todo-item.editing { |
| 426 border-bottom: none; | 484 border-bottom: none; |
| 427 padding: 0; | 485 padding: 0; |
| 428 } | 486 } |
| 487 |
| 488 /* |
| 489 TODO(jmesserly): the ".todo-item label" selector does not work with real |
| 490 ShadowRoot because it crosses the shadow boundary. |
| 491 */ |
| 429 .todo-item.completed [is=editable-label] { | 492 .todo-item.completed [is=editable-label] { |
| 430 color: #a9a9a9; | 493 color: #a9a9a9; |
| 431 text-decoration: line-through; | 494 text-decoration: line-through; |
| 432 } | 495 } |
| 496 |
| 433 .todo-item .toggle { | 497 .todo-item .toggle { |
| 434 text-align: center; | 498 text-align: center; |
| 435 width: 40px; | 499 width: 40px; |
| 500 /* auto, since non-WebKit browsers don't support input styling */ |
| 436 height: auto; | 501 height: auto; |
| 437 position: absolute; | 502 position: absolute; |
| 438 top: 0; | 503 top: 0; |
| 439 bottom: 0; | 504 bottom: 0; |
| 440 margin: auto 0; | 505 margin: auto 0; |
| 441 border: none; | 506 border: none; /* Mobile Safari */ |
| 442 -webkit-appearance: none; | 507 -webkit-appearance: none; |
| 508 /*-moz-appearance: none;*/ |
| 443 -ms-appearance: none; | 509 -ms-appearance: none; |
| 444 -o-appearance: none; | 510 -o-appearance: none; |
| 445 appearance: none; | 511 appearance: none; |
| 446 } | 512 } |
| 513 |
| 447 .todo-item .toggle:after { | 514 .todo-item .toggle:after { |
| 448 content: "✔"; | 515 content: '✔'; |
| 449 line-height: 43px; | 516 line-height: 43px; /* 40 + a couple of pixels visual adjustment */ |
| 450 font-size: 20px; | 517 font-size: 20px; |
| 451 color: #d9d9d9; | 518 color: #d9d9d9; |
| 452 text-shadow: 0 -1px 0 #bfbfbf; | 519 text-shadow: 0 -1px 0 #bfbfbf; |
| 453 } | 520 } |
| 521 |
| 454 .todo-item .toggle:checked:after { | 522 .todo-item .toggle:checked:after { |
| 455 color: #85ada7; | 523 color: #85ada7; |
| 456 text-shadow: 0 1px 0 #669991; | 524 text-shadow: 0 1px 0 #669991; |
| 457 bottom: 1px; | 525 bottom: 1px; |
| 458 position: relative; | 526 position: relative; |
| 459 } | 527 } |
| 460 .todo-item .destroy { | 528 .todo-item .destroy { |
| 461 display: none; | 529 display: none; |
| 462 position: absolute; | 530 position: absolute; |
| 463 top: 0; | 531 top: 0; |
| 464 right: 10px; | 532 right: 10px; |
| 465 bottom: 0; | 533 bottom: 0; |
| 466 width: 40px; | 534 width: 40px; |
| 467 height: 40px; | 535 height: 40px; |
| 468 margin: auto 0; | 536 margin: auto 0; |
| 469 font-size: 22px; | 537 font-size: 22px; |
| 470 color: #a88a8a; | 538 color: #a88a8a; |
| 471 -webkit-transition: all 0.2s; | 539 -webkit-transition: all 0.2s; |
| 472 -moz-transition: all 0.2s; | 540 -moz-transition: all 0.2s; |
| 473 -ms-transition: all 0.2s; | 541 -ms-transition: all 0.2s; |
| 474 -o-transition: all 0.2s; | 542 -o-transition: all 0.2s; |
| 475 transition: all 0.2s; | 543 transition: all 0.2s; |
| 476 } | 544 } |
| 545 |
| 477 .todo-item .destroy:hover { | 546 .todo-item .destroy:hover { |
| 478 text-shadow: 0 0 1px #000, 0 0 10px rgba(199, 107, 107, 0.8); | 547 text-shadow: 0 0 1px #000, |
| 548 0 0 10px rgba(199, 107, 107, 0.8); |
| 479 -webkit-transform: scale(1.3); | 549 -webkit-transform: scale(1.3); |
| 480 -moz-transform: scale(1.3); | 550 -moz-transform: scale(1.3); |
| 481 -ms-transform: scale(1.3); | 551 -ms-transform: scale(1.3); |
| 482 -o-transform: scale(1.3); | 552 -o-transform: scale(1.3); |
| 483 transform: scale(1.3); | 553 transform: scale(1.3); |
| 484 } | 554 } |
| 555 |
| 485 .todo-item .destroy:after { | 556 .todo-item .destroy:after { |
| 486 content: "✖"; | 557 content: '✖'; |
| 487 } | 558 } |
| 559 |
| 488 .todo-item:hover .destroy { | 560 .todo-item:hover .destroy { |
| 489 display: block; | 561 display: block; |
| 490 } | 562 } |
| 491 .todo-item.editing .destroy, .todo-item.editing .toggle { | 563 |
| 564 .todo-item.editing .destroy, |
| 565 .todo-item.editing .toggle { |
| 492 display: none; | 566 display: none; |
| 493 } | 567 } |
| 568 |
| 494 .todo-item.editing:last-child { | 569 .todo-item.editing:last-child { |
| 495 margin-bottom: -1px; | 570 margin-bottom: -1px; |
| 496 } @media screen AND (-webkit-min-device-pixel-ratio:0) { | |
| 497 .todo-item .toggle { | |
| 498 background: none; | |
| 499 } | 571 } |
| 500 #todo-item .toggle { | 572 |
| 501 height: 40px; | 573 /* |
| 574 Hack to remove background from Mobile Safari. |
| 575 Can't use it globally since it destroys checkboxes in Firefox and Opera |
| 576 */ |
| 577 @media screen and (-webkit-min-device-pixel-ratio:0) { |
| 578 .todo-item .toggle { |
| 579 background: none; |
| 580 } |
| 581 #todo-item .toggle { |
| 582 height: 40px; |
| 583 } |
| 502 } | 584 } |
| 503 } | 585 </style> |
| 504 </style><div class="todo-item"> | 586 <div class="todo-item"> |
| 505 <input class="toggle" type="checkbox"> | 587 <input class="toggle" type="checkbox"> |
| 506 <div is="editable-label" id="label" value="{{todo.task}}"><shadow-root> | 588 <span is="editable-label" id="label" value="{{todo.task}}"><shadow-root> |
| 507 <template bind="" if="{{notEditing}}"> | 589 <template bind="" if="{{!editing}}"></template> |
| 508 <label class="edit-label" on-double-click="edit">{{value}}</label> | |
| 509 </template> | |
| 510 <label class="edit-label" on-double-click="edit">three (unchecked)</label> | 590 <label class="edit-label" on-double-click="edit">three (unchecked)</label> |
| 511 | 591 |
| 512 <template bind="" if="{{editing}}"> | 592 <template bind="" if="{{editing}}"></template> |
| 513 <form on-submit="update"> | 593 </shadow-root></span> |
| 514 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> | |
| 515 </form> | |
| 516 </template> | |
| 517 </shadow-root></div> | |
| 518 <button class="destroy" on-click="removeTodo"></button> | 594 <button class="destroy" on-click="removeTodo"></button> |
| 519 </div> | 595 </div> |
| 520 </shadow-root></li> | 596 </shadow-root></li> |
| 521 | 597 |
| 522 </ul> | 598 </ul> |
| 523 </section> | 599 </section> |
| 524 <template bind="" if="{{app.hasTodos}}"> | 600 <template bind="" if="{{app.todos.length > 0}}"></template> |
| 525 <footer id="footer"> | |
| 526 <span id="todo-count"><strong>{{app.remaining}}</strong></span> | |
| 527 <ul is="router-options" id="filters"> | |
| 528 <li> <a href="#/">All</a> </li> | |
| 529 <li> <a href="#/active">Active</a> </li> | |
| 530 <li> <a href="#/completed">Completed</a> </li> | |
| 531 </ul> | |
| 532 <template bind="" if="{{app.hasCompleteTodos}}"> | |
| 533 <button id="clear-completed" on-click="clear"> | |
| 534 Clear completed ({{app.doneCount}}) | |
| 535 </button> | |
| 536 </template> | |
| 537 </footer> | |
| 538 </template> | |
| 539 <footer id="footer"> | 601 <footer id="footer"> |
| 540 <span id="todo-count"><strong>2</strong></span> | 602 <span id="todo-count"><strong>2</strong></span> |
| 541 <ul is="router-options" id="filters"><shadow-root><content></content></s
hadow-root> | 603 <ul is="router-options" id="filters"><shadow-root><content></content></s
hadow-root> |
| 542 <li> <a href="#/" class="selected">All</a> </li> | 604 <li> <a href="#/" class="selected">All</a> </li> |
| 543 <li> <a href="#/active" class="">Active</a> </li> | 605 <li> <a href="#/active" class="">Active</a> </li> |
| 544 <li> <a href="#/completed" class="">Completed</a> </li> | 606 <li> <a href="#/completed" class="">Completed</a> </li> |
| 545 </ul> | 607 </ul> |
| 546 <template bind="" if="{{app.hasCompleteTodos}}"></template> | 608 <template bind="" if="{{app.hasCompleteTodos}}"></template> |
| 547 <button id="clear-completed" on-click="clear"> | 609 <button id="clear-completed" on-click="clear"> |
| 548 Clear completed (1) | 610 Clear completed (1) |
| (...skipping 12 matching lines...) Expand all Loading... |
| 561 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. | 623 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. |
| 562 </p> | 624 </p> |
| 563 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> | 625 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> |
| 564 </footer> | 626 </footer> |
| 565 </shadow-root></span> | 627 </shadow-root></span> |
| 566 | 628 |
| 567 | 629 |
| 568 | 630 |
| 569 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s
cript> | 631 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s
cript> |
| 570 <script type="application/dart" src="todomvc_listorder_test.html_bootstrap.dart"
></script></body></html> | 632 <script type="application/dart" src="todomvc_listorder_test.html_bootstrap.dart"
></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 22962005:
Merge pull request #581 from kevmoo/polymer (Closed)
Base URL: https://github.com/dart-lang/web-ui.git@polymer