forked from tastejs/todomvc
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request tastejs#112 from cburgdorf/angularRefactoring
Angular refactoring
- Loading branch information
Showing
12 changed files
with
821 additions
and
551 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,381 +1,4 @@ | ||
| html, body, div, span, applet, object, iframe, | ||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
| a, abbr, acronym, address, big, cite, code, | ||
| del, dfn, em, font, img, ins, kbd, q, s, samp, | ||
| small, strike, strong, sub, sup, tt, var, | ||
| dl, dt, dd, ol, ul, li, | ||
| fieldset, form, label, legend, | ||
| table, caption, tbody, tfoot, thead, tr, th, td { | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| outline: 0; | ||
| font-weight: inherit; | ||
| font-style: inherit; | ||
| font-size: 100%; | ||
| font-family: inherit; | ||
| vertical-align: baseline; | ||
| } | ||
| body { | ||
| line-height: 1; | ||
| color: black; | ||
| background: white; | ||
| } | ||
| ol, ul { | ||
| list-style: none; | ||
| } | ||
| a img { | ||
| border: none; | ||
| } | ||
|
|
||
| html { | ||
| background: #eeeeee; | ||
| } | ||
| body { | ||
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
| font-size: 14px; | ||
| line-height: 1.4em; | ||
| background: #eeeeee; | ||
| color: #333333; | ||
| } | ||
|
|
||
| .clickable{ | ||
| cursor:pointer; | ||
| } | ||
|
|
||
| #todoapp { | ||
| background: none repeat scroll 0 0 white; | ||
| border-bottom-left-radius: 5px; | ||
| border-bottom-right-radius: 5px; | ||
| box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); | ||
| background: none repeat scroll 0 0 white; | ||
| margin: 0 auto 40px; | ||
| padding: 20px; | ||
| width: 480px; | ||
| } | ||
|
|
||
| #todoapp { | ||
| width: 480px; | ||
| margin: 0 auto 40px; | ||
| background: white; | ||
| padding: 20px; | ||
| -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0; | ||
| -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0; | ||
| -o-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0; | ||
| box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0; | ||
| } | ||
| #todoapp h1 { | ||
| font-size: 36px; | ||
| font-weight: bold; | ||
| text-align: center; | ||
| padding: 20px 0 30px 0; | ||
| line-height: 1; | ||
| } | ||
|
|
||
| #create-todo { | ||
| position: relative; | ||
| } | ||
| #todo-form input { | ||
| width: 466px; | ||
| font-size: 24px; | ||
| font-family: inherit; | ||
| line-height: 1.4em; | ||
| border: 0; | ||
| outline: none; | ||
| padding: 6px; | ||
| border: 1px solid #999999; | ||
| -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; | ||
| -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; | ||
| -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; | ||
| box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; | ||
| } | ||
| #create-todo input::-webkit-input-placeholder { | ||
| font-style: italic; | ||
| } | ||
| #create-todo span { | ||
| position: absolute; | ||
| z-index: 999; | ||
| width: 170px; | ||
| left: 50%; | ||
| margin-left: -85px; | ||
| } | ||
|
|
||
| #todo-list { | ||
| margin-top: 10px; | ||
| } | ||
| #todo-list li { | ||
| padding: 12px 20px 11px 0; | ||
| position: relative; | ||
| font-size: 24px; | ||
| line-height: 1.1em; | ||
| border-bottom: 1px solid #cccccc; | ||
| } | ||
| #todo-list li:after { | ||
| content: "\0020"; | ||
| display: block; | ||
| height: 0; | ||
| clear: both; | ||
| overflow: hidden; | ||
| visibility: hidden; | ||
| } | ||
| #todo-list li.editing-true { | ||
| padding: 0; | ||
| border-bottom: 0; | ||
| } | ||
| #todo-list .editing-true .display, | ||
| #todo-list .edit { | ||
| display: none; | ||
| } | ||
| #todo-list .editing-true .edit { | ||
| display: block; | ||
| } | ||
| #todo-list .editing-true input { | ||
| width: 444px; | ||
| font-size: 24px; | ||
| font-family: inherit; | ||
| margin: 0; | ||
| line-height: 1.6em; | ||
| border: 0; | ||
| outline: none; | ||
| padding: 10px 7px 0px 27px; | ||
| border: 1px solid #999999; | ||
| -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; | ||
| -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; | ||
| -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; | ||
| box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset; | ||
| } | ||
| #todo-list .check { | ||
| position: relative; | ||
| top: 9px; | ||
| margin: 0 10px 0 7px; | ||
| float: left; | ||
| } | ||
| #todo-list .done-true .todo-content { | ||
| text-decoration: line-through; | ||
| color: #777777; | ||
| } | ||
| #todo-list .todo-destroy { | ||
| position: absolute; | ||
| right: 5px; | ||
| top: 14px; | ||
| display: none; | ||
| cursor: pointer; | ||
| width: 20px; | ||
| height: 20px; | ||
| background: url(../img/destroy.png) no-repeat 0 0; | ||
| } | ||
| #todo-list li:hover .todo-destroy { | ||
| display: block; | ||
| } | ||
| #todo-list .todo-destroy:hover { | ||
| background-position: 0 -20px; | ||
| } | ||
|
|
||
| #todo-stats { | ||
| *zoom: 1; | ||
| margin-top: 10px; | ||
| color: #777777; | ||
|
|
||
| background: none repeat scroll 0 0 #F4FCE8; | ||
| border-radius: 0 0 5px 5px; | ||
| border-top: 1px solid #EDEDED; | ||
| color: #555555; | ||
| display: block; | ||
| line-height: 36px; | ||
| margin: 20px -20px -20px; | ||
| overflow: hidden; | ||
| padding: 0 20px; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| #todo-stats:after { | ||
| content: "\0020"; | ||
| display: block; | ||
| height: 0; | ||
| clear: both; | ||
| overflow: hidden; | ||
| visibility: hidden; | ||
| } | ||
| #todo-stats .todo-count { | ||
| float: left; | ||
| } | ||
| #todo-stats .todo-count .number { | ||
| font-weight: bold; | ||
| color: #333333; | ||
| } | ||
| #todo-stats .todo-clear { | ||
| float: right; | ||
| } | ||
|
|
||
| #todoapp #todo-stats { | ||
| background: none repeat scroll 0 0 #F4FCE8; | ||
| border-bottom-left-radius: 5px; | ||
| border-bottom-right-radius: 5px; | ||
| border-top: 1px solid #EDEDED; | ||
| color: #555555; | ||
| line-height: 36px; | ||
| margin-top: 10px; | ||
| padding: 0 20px; | ||
| } | ||
|
|
||
| #todoapp #todo-stats .todo-clear a { | ||
| display: block; | ||
| line-height: 20px; | ||
| text-decoration: none; | ||
| -moz-border-radius: 12px; | ||
| -webkit-border-radius: 12px; | ||
| -o-border-radius: 12px; | ||
| -ms-border-radius: 12px; | ||
| -khtml-border-radius: 12px; | ||
| border-radius: 12px; | ||
| background: rgba(0, 0, 0, 0.1); | ||
| color: #555555; | ||
| font-size: 11px; | ||
| margin-top: 8px; | ||
| padding: 0 10px 1px; | ||
| -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; | ||
| -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; | ||
| -o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; | ||
| box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; | ||
| } | ||
| /* line 136 */ | ||
| #todoapp #todo-stats .todo-clear a:hover, #todoapp #todo-stats .todo-clear a:focus { | ||
| background: rgba(0, 0, 0, 0.15); | ||
| -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0; | ||
| -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0; | ||
| -o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0; | ||
| box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0; | ||
| } | ||
|
|
||
| #todo-stats .todo-clear a { | ||
| color: #777777; | ||
| font-size: 12px; | ||
| } | ||
| #todo-stats .todo-clear a:visited { | ||
| color: #777777; | ||
| } | ||
| #todo-stats .todo-clear a:hover, #todo-stats .todo-clear a:focus { | ||
| color: #336699; | ||
| } | ||
|
|
||
| #instructions { | ||
| width: 520px; | ||
| margin: 10px auto; | ||
| color: #777777; | ||
| text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; | ||
| text-align: center; | ||
| } | ||
| #instructions a { | ||
| color: #336699; | ||
| } | ||
|
|
||
| #credits { | ||
| width: 520px; | ||
| margin: 30px auto; | ||
| color: #999; | ||
| text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; | ||
| text-align: center; | ||
| } | ||
| #credits a { | ||
| color: #888; | ||
| } | ||
|
|
||
|
|
||
| /* | ||
| * Fran�ois 'cahnory' Germain | ||
| */ | ||
| .ui-tooltip, .ui-tooltip-top, .ui-tooltip-right, .ui-tooltip-bottom, .ui-tooltip-left { | ||
| position:absolute; | ||
| color:#ffffff; | ||
| cursor:normal; | ||
| display:-moz-inline-stack; | ||
| display:inline-block; | ||
| font-size:12px; | ||
| font-family:arial; | ||
| padding:.5em 1em; | ||
| position:relative; | ||
| text-align:center; | ||
| text-shadow:0 -1px 1px #111111; | ||
| -webkit-border-top-left-radius:4px ; | ||
| -webkit-border-top-right-radius:4px ; | ||
| -webkit-border-bottom-right-radius:4px ; | ||
| -webkit-border-bottom-left-radius:4px ; | ||
| -khtml-border-top-left-radius:4px ; | ||
| -khtml-border-top-right-radius:4px ; | ||
| -khtml-border-bottom-right-radius:4px ; | ||
| -khtml-border-bottom-left-radius:4px ; | ||
| -moz-border-radius-topleft:4px ; | ||
| -moz-border-radius-topright:4px ; | ||
| -moz-border-radius-bottomright:4px ; | ||
| -moz-border-radius-bottomleft:4px ; | ||
| border-top-left-radius:4px ; | ||
| border-top-right-radius:4px ; | ||
| border-bottom-right-radius:4px ; | ||
| border-bottom-left-radius:4px ; | ||
| -o-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444; | ||
| -moz-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444; | ||
| -khtml-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444; | ||
| -webkit-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444; | ||
| box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444; | ||
| background-color:#3b3b3b; | ||
| background-image:-moz-linear-gradient(top,#555555,#222222); | ||
| background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#555555),color-stop(1,#222222)); | ||
| filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222); | ||
| -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222); | ||
| } | ||
| .ui-tooltip:after, .ui-tooltip-top:after, .ui-tooltip-right:after, .ui-tooltip-bottom:after, .ui-tooltip-left:after { | ||
| content:"\25B8"; | ||
| display:block; | ||
| font-size:2em; | ||
| height:0; | ||
| line-height:0; | ||
| position:absolute; | ||
| } | ||
| .ui-tooltip:after, .ui-tooltip-bottom:after { | ||
| color:#2a2a2a; | ||
| bottom:0; | ||
| left:1px; | ||
| text-align:center; | ||
| text-shadow:1px 0 2px #000000; | ||
| -o-transform:rotate(90deg); | ||
| -moz-transform:rotate(90deg); | ||
| -khtml-transform:rotate(90deg); | ||
| -webkit-transform:rotate(90deg); | ||
| width:100%; | ||
| } | ||
| .ui-tooltip-top:after { | ||
| bottom:auto; | ||
| color:#4f4f4f; | ||
| left:-2px; | ||
| top:0; | ||
| text-align:center; | ||
| text-shadow:none; | ||
| -o-transform:rotate(-90deg); | ||
| -moz-transform:rotate(-90deg); | ||
| -khtml-transform:rotate(-90deg); | ||
| -webkit-transform:rotate(-90deg); | ||
| width:100%; | ||
| } | ||
| .ui-tooltip-right:after { | ||
| color:#222222; | ||
| right:-0.375em; | ||
| top:50%; | ||
| margin-top:-.05em; | ||
| text-shadow:0 1px 2px #000000; | ||
| -o-transform:rotate(0); | ||
| -moz-transform:rotate(0); | ||
| -khtml-transform:rotate(0); | ||
| -webkit-transform:rotate(0); | ||
| } | ||
| .ui-tooltip-left:after { | ||
| color:#222222; | ||
| left:-0.375em; | ||
| top:50%; | ||
| margin-top:.1em; | ||
| text-shadow:0 -1px 2px #000000; | ||
| -o-transform:rotate(180deg); | ||
| -moz-transform:rotate(180deg); | ||
| -khtml-transform:rotate(180deg); | ||
| -webkit-transform:rotate(180deg); | ||
| } | ||
| /*this doesn't seem to be used in the jquery example at all. Its getting in the way */ | ||
| #todo-count span { | ||
| font-weight: inherit; | ||
| } |
Oops, something went wrong.