Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit 652036b256c5f015b13ad44cde0f6bd04b8c03f7 @yyx990803 committed Feb 20, 2012
Showing with 2,478 additions and 0 deletions.
  1. +23 −0 css/style.css
  2. +164 −0 css/style.less
  3. BIN img/check.png
  4. BIN img/cross.png
  5. +20 −0 index.html
  6. +471 −0 js/app.js
  7. +10 −0 js/shiv.js
  8. +378 −0 js/touch-scroll.js
  9. +1,412 −0 js/zepto.js
@@ -0,0 +1,23 @@
+body{width:100%;padding:0;margin:0;background-color:#000;color:#fff;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
+ul{margin:0;padding:0;list-style-type:none;}
+a{color:#fff;text-decoration:none;}
+#wrapper{overflow-x:hidden;overflow-y:auto;}
+#check,#cross{display:block;width:55px;height:60px;position:absolute;-webkit-transition:opacity 0 cubic-bezier(0, 0, 0.2, 1),-webkit-transform 0 cubic-bezier(0, 0, 0.2, 1);-webkit-perspective:0;-webkit-backface-visibility:hidden;display:none;}
+#check{left:0;}
+#cross{right:0;}
+#home,#listview{position:absolute;width:100%;height:100%;top:0;left:0;-webkit-transition:all .15s ease;-webkit-perspective:0;-webkit-backface-visibility:hidden;}
+#home{z-index:2;}
+#listview{z-index:1;}
+.drag{z-index:999 !important;-webkit-transition:all 0 cubic-bezier(0, 0, 0.2, 1) !important;}
+.shadow{box-shadow:0 1px 6px rgba(0, 0, 0, 0.25);}
+.slow{-webkit-transition:all 0.35s ease-in-out !important;}
+.medium{-webkit-transition:all 0.25s ease-in-out !important;}
+.fast{-webkit-transition:all .15s ease !important;}
+.list,.todo{height:60px;-webkit-user-select:none;-webkit-transition:all .1s ease;-webkit-perspective:0;-webkit-backface-visibility:hidden;position:relative;}.list .inner,.todo .inner{height:58px;padding:0 10px;font-size:18px;font-weight:bold;line-height:58px;border-top:1px solid rgba(255, 255, 255, 0.1);border-bottom:1px solid rgba(0, 0, 0, 0.1);position:relative;}
+.list .name,.todo .name{display:inline-block;position:relative;}.list .name span,.todo .name span{position:absolute;z-index:2;display:block;width:100%;height:2px;background-color:#fff;left:0;top:52%;-webkit-perspective:0;-webkit-backface-visibility:hidden;-webkit-transform-origin:0%;-webkit-transition:-webkit-transform 0 cubic-bezier(0, 0, 0.2, 1);-webkit-transform:scalex(0);}
+.list input[type="text"],.todo input[type="text"]{border:none;background:transparent;color:#fff;font-size:18px;font-weight:bold;padding:0;}
+.list{background-color:#0086F3;}.list .count{position:absolute;right:0;top:-1px;width:60px;height:60px;text-align:center;line-height:60px;background-color:rgba(255, 255, 255, 0.15);}
+.list.empty{color:rgba(255, 255, 255, 0.5);}
+.todo{background-color:#f5001d;}.todo.green{background-color:#00AA33 !important;}
+.todo.done{background-color:#252525 !important;color:#434343;}.todo.done .name span{-webkit-transform:scalex(1) !important;background-color:#434343 !important;}
+.todo.done a{color:#434343 !important;}
@@ -0,0 +1,164 @@
+body {
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ background-color: #000;
+ color: #fff;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+ul {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+
+a {
+ color: #fff;
+ text-decoration: none;
+}
+
+#wrapper {
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+
+#check, #cross {
+ display: block;
+ width: 55px;
+ height: 60px;
+ position: absolute;
+ -webkit-transition: opacity 0 cubic-bezier(0,0,0.2,1), -webkit-transform 0 cubic-bezier(0,0,0.2,1);
+ -webkit-perspective: 0;
+ -webkit-backface-visibility: hidden;
+ display: none;
+}
+
+#check {
+ left: 0;
+}
+
+#cross {
+ right: 0;
+}
+
+#home, #listview {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ -webkit-transition: all .15s ease;
+ -webkit-perspective: 0;
+ -webkit-backface-visibility: hidden;
+}
+
+#home {
+ z-index: 2;
+}
+
+#listview {
+ z-index: 1;
+}
+
+.drag {
+ z-index: 999 !important;
+ -webkit-transition: all 0 cubic-bezier(0,0,0.2,1) !important;
+}
+
+.shadow {
+ box-shadow: 0 1px 6px rgba(0,0,0,.25);
+}
+
+.slow {
+ -webkit-transition: all .35s ease-in-out !important;
+}
+
+.medium {
+ -webkit-transition: all .25s ease-in-out !important;
+}
+
+.fast {
+ -webkit-transition: all .15s ease !important;
+}
+
+.list, .todo {
+ height: 60px;
+ -webkit-user-select: none;
+ -webkit-transition: all .1s ease;
+ -webkit-perspective: 0;
+ -webkit-backface-visibility: hidden;
+ position: relative;
+ .inner {
+ height: 58px;
+ padding: 0 10px;
+ font-size: 18px;
+ font-weight: bold;
+ line-height: 58px;
+ border-top: 1px solid rgba(255,255,255,.1);
+ border-bottom: 1px solid rgba(0,0,0,.1);
+ position: relative;
+ }
+ .name {
+ display: inline-block;
+ position: relative;
+ span {
+ position: absolute;
+ z-index: 2;
+ display: block;
+ width: 100%;
+ height: 2px;
+ background-color: #fff;
+ left: 0;
+ top: 52%;
+ -webkit-perspective: 0;
+ -webkit-backface-visibility: hidden;
+ -webkit-transform-origin: 0%;
+ -webkit-transition: -webkit-transform 0 cubic-bezier(0,0,0.2,1);
+ -webkit-transform: scaleX(0);
+ }
+ }
+ input[type="text"] {
+ border: none;
+ background: transparent;
+ color: #fff;
+ font-size: 18px;
+ font-weight: bold;
+ padding: 0;
+ }
+}
+
+.list {
+ background-color: #0086F3;
+ .count {
+ position: absolute;
+ right: 0;
+ top: -1px;
+ width: 60px;
+ height: 60px;
+ text-align: center;
+ line-height: 60px;
+ background-color: rgba(255,255,255,.15);
+ }
+ &.empty {
+ color: rgba(255,255,255,.5);
+ }
+}
+
+.todo {
+ background-color: hsl(353, 100%, 48%);
+ &.green {
+ background-color: #00AA33 !important;
+ }
+ &.done {
+ background-color: #252525 !important;
+ color: #434343;
+ .name span {
+ -webkit-transform: scaleX(1) !important;
+ background-color: #434343 !important;
+ }
+ a {
+ color: #434343 !important;
+ }
+ }
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>HTML5 Clear</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+ <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
+ <script src="js/zepto.js" type="text/javascript" charset="utf-8"></script>
+ <!--<script src="js/touch-scroll.js" type="text/javascript" charset="utf-8"></script>-->
+ <script src="js/shiv.js" type="text/javascript" charset="utf-8"></script>
+ <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
+ <!--<script src="../live.js" type="text/javascript" charset="utf-8"></script>-->
+ </head>
+ <body>
+ <img id="check" src="img/check.png"/>
+ <img id="cross" src="img/cross.png"/>
+ <div id="wrapper">
+ </div>
+ </body>
+</html>
Oops, something went wrong. Retry.

0 comments on commit 652036b

Please sign in to comment.