| /* base.css overrides */ |
| @host { |
| .editing { |
| border-bottom: none; |
| padding: 0; |
| } |
| } |
| |
| button { |
| margin: 0; |
| padding: 0; |
| border: 0; |
| background-color: transparent; |
| background-image: none; |
| font-size: 100%; |
| vertical-align: baseline; |
| font-family: inherit; |
| color: inherit; |
| -webkit-appearance: none; |
| /*-moz-appearance: none;*/ |
| -ms-appearance: none; |
| -o-appearance: none; |
| appearance: none; |
| } |
| |
| |
| .edit { |
| position: relative; |
| margin: 0; |
| width: 100%; |
| font-size: 24px; |
| font-family: inherit; |
| line-height: 1.4em; |
| border: 0; |
| outline: none; |
| color: inherit; |
| padding: 6px; |
| border: 1px solid #999; |
| box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| -ms-box-sizing: border-box; |
| -o-box-sizing: border-box; |
| box-sizing: border-box; |
| -webkit-font-smoothing: antialiased; |
| -moz-font-smoothing: antialiased; |
| -ms-font-smoothing: antialiased; |
| -o-font-smoothing: antialiased; |
| font-smoothing: antialiased; |
| } |
| |
| .edit { |
| width: 506px; |
| padding: 13px 17px 12px 17px; |
| margin: 0 0 0 43px; |
| } |
| |
| .toggle { |
| text-align: center; |
| width: 40px; |
| /* auto, since non-WebKit browsers doesn't support input styling */ |
| height: auto; |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| margin: auto 0; |
| border: none; /* Mobile Safari */ |
| -webkit-appearance: none; |
| /*-moz-appearance: none;*/ |
| -ms-appearance: none; |
| -o-appearance: none; |
| appearance: none; |
| } |
| |
| .toggle:after { |
| content: '✔'; |
| line-height: 43px; /* 40 + a couple of pixels visual adjustment */ |
| font-size: 20px; |
| color: #d9d9d9; |
| text-shadow: 0 -1px 0 #bfbfbf; |
| } |
| |
| .toggle:checked:after { |
| color: #85ada7; |
| text-shadow: 0 1px 0 #669991; |
| bottom: 1px; |
| position: relative; |
| } |
| |
| label { |
| word-break: break-word; |
| padding: 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; |
| } |
| |
| .completed label { |
| color: #a9a9a9; |
| text-decoration: line-through; |
| } |
| |
| .destroy { |
| display: none; |
| position: absolute; |
| top: 0; |
| right: 10px; |
| bottom: 0; |
| 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; |
| } |
| |
| .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); |
| } |
| |
| .destroy:after { |
| content: '✖'; |
| } |
| |
| .view:hover .destroy { |
| display: block; |
| } |
| |
| /* |
| Hack to remove background from Mobile Safari. |
| Can't use it globally since it destroys checkboxes in Firefox and Opera |
| */ |
| @media screen and (-webkit-min-device-pixel-ratio:0) { |
| .toggle { |
| background: none; |
| /* |
| ShadowDOM Polyfill work around for webkit/blink bug |
| https://code.google.com/p/chromium/issues/detail?id=251510 |
| */ |
| background-color: transparent; |
| } |
| |
| .toggle { |
| height: 40px; |
| } |
| } |