Fire JS Bin - clear

You can jump to the latest bin by adding /latest to your URL

Find

→ ←

⟲

Replace

⊗ All Replace

//Templates
var templates = {
  Home: function () {
    return '<ul id="home"></ul>'
  },
  List: function (a) {
    var b = a.count();
    return '<li class="list ' + (b == 0 ? "empty" : "") + '">' + '<div class="inner">' + '<div class="name">' + a.name + "</div>" + '<div class="count">' + b + "</div>" + "</div></li>"
  },
  ListView: function () {
    return '<ul id="listview"></ul>'
  },
  Todo: function (a) {
    return '<li class="todo ' + (a.done ? "done" : "") + '">' + '<div class="inner">' + '<div class="name">' + a.name + "<span></span></div>" + "</div></li>"
  },
  newList: function (a) {
    return '<li class="list ' + a + '">' + '<div class="inner">' + '<div class="name"><input type="text" value="' + (a == "top" ? "Pull to create item" : "Tap me") + '"/></div>' + '<div class="count">0</div>' + "</div></li>"
  },
  newTodo: function (a) {
    return '<li class="todo ' + a + '">' + '<div class="inner">' + '<div class="name"><input type="text" value="' + (a == "top" ? "Pull to create item" : "Tap me") + '"/></div>' + "</div></li>"
  },
  emptyListView: function () {
    return '<li class="addmore">Tap to add new todo</li>'
  },
  emptyHome: function () {
    return '<li class="addmore">Tap to add a new List</li>'
  }
},
    Todo = function (a) {
    this.name = a, this.done = !1
    };
Todo.prototype = {
  render: function (a, b) {
    this.list = a, this.index = b;
    var c = this,
        d = !1,
        e = 0,
        f = !1,
        g = {},
        h = 55,
        i = dy = 0;
    c.el = $(templates.Todo(c));
    var j = c.el.find("span");
    return c.el.bind("touchstart", function (a) {
      a.touches.length == 1 && !window.editing && (g.x1 = a.touches[0].pageX, g.y1 = a.touches[0].pageY)
    }).bind("touchmove", function (b) {
      if (!window.globalDrag && !window.editing && !window.draggingDown && b.touches.length == 1) {
        i = b.touches[0].pageX - g.x1, dy = b.touches[0].pageY - g.y1, Math.abs(dy) < 6 && Math.abs(i) > 0 && !f && !d && (f = !0, window.inAction = !0, c.el.addClass("drag"), a.home.resetIcons(c.el));
        if (f) {
          if (i > 0 && i < h) {
            var k = i / h;
            k < .05 && (k = 0), $("#check").css("opacity", k), c.done || j.css("-webkit-transform", "scaleX(" + k + ")")
          } else i < 0 && i > -h ? $("#cross").css("opacity", -i / h) : i >= h ? (i = h + (i - h) * .25, $("#check").css({
            opacity: 1,
            "-webkit-transform": "translate3d(" + (i - h) + "px, 0, 0)"
          })) : i <= -h && (i = -h + (i + h) * .25, $("#cross").css({
            opacity: 1,
            "-webkit-transform": "translate3d(" + (i + h) + "px, 0, 0)"
          }));
          i >= h - 1 ? c.done ? c.el.removeClass("done") : c.el.addClass("green") : c.done ? c.el.addClass("done") : c.el.removeClass("green"), (i <= 0 || a.todos.length > 0) && c.el.css("-webkit-transform", "translate3d(" + i + "px, 0, 0)")
        }
        if (d) {
          window.inAction = !0, c.el.css("-webkit-transform", "translate3d(0," + (dy - e) + "px, 0) scale(1.05)");
          if (dy - e < -30 || dy - e > 30) {
            var l = Math[dy > 0 ? "ceil" : "floor"]((dy > 0 ? dy - 30 : dy + 30) / 60),
                m = l * 60;
            if (e != m && c.index + l >= 0 && c.index + l < c.list.todos.length) {
              var n = $(c.list.view.find("li.todo").get(c.index + l));
              n[m > e ? "after" : "before"](c.el), e = m, c.el.css("-webkit-transform", "translate3d(0," + (dy - e) + "px, 0) scale(1.05)")
            }
          }
        }
      }
    }).bind("swipeLeft", function (a) {
      !window.globalDrag && !window.editing && !window.draggingDown && c.destroy()
    }).bind("swipeRight", function (a) {
      if (!window.globalDrag && !window.editing && !window.draggingDown) if (!c.done) {
        c.done = !0;
        var b = (c.list.todos.length - 1) * 60 - c.el.get(0).offsetTop;
        setTimeout(function () {
          c.el.addClass("medium").addClass("done").css({
            "z-index": "999",
            "margin-bottom": "-60px",
            "-webkit-transform": "translate3d(0," + b + "px,0)"
          }), setTimeout(function () {
            c.list.todos.splice(c.index, 1), c.list.todos.push(c), c.list.resetView()
          }, 250)
        }, 150)
      } else {
        c.done = !1;
        var b = -c.el.get(0).offsetTop;
        setTimeout(function () {
          c.el.addClass("medium").removeClass("done").css({
            "z-index": "999",
            "margin-bottom": "-60px",
            "-webkit-transform": "translate3d(0," + b + "px,0)"
          }), c.el.siblings().addClass("medium").css({
            "-webkit-transform": "translate3d(0,60px,0)"
          }), setTimeout(function () {
            c.list.todos.splice(c.index, 1), c.list.todos.unshift(c), c.list.resetView()
          }, 250)
        }, 150)
      }
    }).bind("longTap", function (a) {
      !f && !window.editing && (d = !0, e = 0, c.el.addClass("dragged").css("-webkit-transform", "scale(1.05)"))
    }).bind("tap", function (a) {
      a.cancelBubble = !0
    }).bind("touchend touchcancel", function (a) {
      if (a.touches.length == 0) {
        window.inAction = !1, c.el.removeClass("drag").css("-webkit-transform", "translate3d(0,0,0)"), g = {}, $("#cross, #check").css("opacity", 0), f && (f = !1, c.done || (j.addClass("fast").css("-webkit-transform", "scaleX(0)"), setTimeout(function () {
          j.removeClass("fast")
        }, 150)));
        if (d) {
          a.stopPropagation(), d = !1, c.el.removeClass("dragged");
          var b = e / 60 + c.index,
              h = c.list.todos,
              i = c.list.count();
          h.splice(c.index, 1), h.splice(b, 0, c), c.done ? b < i && (c.done = !1) : i < c.list.todos.length && b > i - 1 && (c.done = !0), setTimeout(function () {
            c.list.resetView()
          }, 150)
        }
      }
    }), c.el.find(".name").tap(function (a) {
      a.cancelBubble = !0;
      if (!window.editing && !window.inAction && !window.globalDragging && !window.draggingDown) {
        c.el.siblings().css("opacity", .3);
        var b = $(this).text();
        window.editing = !0, $(this).html($('<input type="text" value="' + b + '"/>').blur(function () {
          c.el.siblings().css("opacity", 1), window.editing = !1;
          var a = this.value;
          a ? (c.name = a, $(this).replaceWith(a)) : c.destroy()
        }))
      }
    }), c.el
  },
  destroy: function () {
    var a = this;
    a.el.addClass("medium").css("-webkit-transform", "translate3d(-" + window.innerWidth + "px, 0, 0)"), setTimeout(function () {
      a.el.css("height", 0)
    }, 250), setTimeout(function () {
      a.el.remove(), a.list.todos.splice(a.index, 1), a.list.resetView()
    }, 500)
  }
};
var List = function (a, b) {
  this.name = a, this.todos = b || []
};
List.prototype = {
  renderSelf: function (a, b) {
    this.home = a, this.index = b;
    var c = this,
        d = !1,
        e = 0,
        f = !1,
        g = {},
        h = 55;
    return c.el = $(templates.List(c)).bind("touchstart", function (a) {
      a.touches.length == 1 && !window.editing && (g.x1 = a.touches[0].pageX, g.y1 = a.touches[0].pageY)
    }).bind("touchmove", function (b) {
      if (b.touches.length == 1 && !window.globalDrag && !window.editing && !window.draggingDown) {
        var i = b.touches[0].pageX - g.x1,
            j = b.touches[0].pageY - g.y1;
        Math.abs(j) < 6 && Math.abs(i) > 0 && !f && !d && (f = !0, window.inAction = !0, c.el.addClass("drag"), a.resetIcons(c.el)), f && (i > 0 && i < h ? $("#check").css("opacity", i / h) : i < 0 && i > -h ? $("#cross").css("opacity", -i / h) : i >= h ? (i = h + (i - h) * .25, $("#check").css({
          opacity: 1,
          "-webkit-transform": "translate3d(" + (i - h) + "px, 0, 0)"
        })) : i <= -h && (i = -h + (i + h) * .25, $("#cross").css({
          opacity: 1,
          "-webkit-transform": "translate3d(" + (i + h) + "px, 0, 0)"
        })), (i <= 0 || c.todos.length > 0) && c.el.css("-webkit-transform", "translate3d(" + i + "px, 0, 0)"));
        if (d) {
          window.inAction = !0, c.el.css("-webkit-transform", "translate3d(0," + (j - e) + "px, 0) scale(1.05)");
          if (j - e < -30 || j - e > 30) {
            var k = Math[j > 0 ? "ceil" : "floor"]((j > 0 ? j - 30 : j + 30) / 60),
                l = k * 60;
            if (l != e && c.index + k >= 0 && c.index + k < c.home.lists.length) {
              var m = $(c.home.el.find("li.list").get(c.index + k));
              m[l > e ? "after" : "before"](c.el), e = l, c.el.css("-webkit-transform", "translate3d(0," + (j - e) + "px, 0) scale(1.05)")
            }
          }
        }
      }
    }).bind("swipeLeft", function (a) {
      if (!window.globalDrag && !window.editing && !window.draggingDown) {
        var b = c.count();
        b != 0 ? confirm("This list contains " + b + " items. Are you sure you want to delete it?") ? c.destroy() : setTimeout(function () {
          c.home.reset()
        }, 100) : c.destroy()
      }
    }).bind("swipeRight", function (a) {
      !window.globalDrag && !window.editing && !window.draggingDown && c.count() > 0 && (confirm("Are you sure you want to complete all your items in this list?") && $.each(c.todos, function (a, b) {
        b.done = !0
      }), setTimeout(function () {
        c.home.reset()
      }, 100))
    }).bind("longTap", function (a) {
      !f && !window.globalDrag && !window.editing && !window.draggingDown && (d = !0, e = 0, c.el.addClass("dragged").css("-webkit-transform", "scale(1.05)"))
    }).bind("tap", function (a) {
      a.cancelBubble = !0, window.editing || c.renderView().appendTo("#wrapper")
    }).bind("touchend touchcancel", function (a) {
      window.inAction = !1, c.el.removeClass("drag").css("-webkit-transform", "translate3d(0,0,0)"), g = {}, $("#cross, #check").css("opacity", 0), f && (f = !1);
      if (d) {
        d = !1, c.el.removeClass("dragged");
        var b = e / 60 + c.index,
            h = c.home.lists;
        h.splice(c.index, 1), h.splice(b, 0, c), setTimeout(function () {
          c.home.reset()
        }, 150)
      }
    }), c.el.find(".name").tap(function (a) {
      a.cancelBubble = !0;
      if (!window.editing && !window.inAction && !window.globalDragging && !window.draggingDown) {
        c.el.siblings().css("opacity", .3);
        var b = $(this).text();
        window.editing = !0, $(this).html($('<input type="text" value="' + b + '"/>').blur(function () {
          window.editing = !1, c.el.siblings().css("opacity", 1);
          var a = this.value;
          if (!a) {
            var d = c.count();
            d == 0 || confirm("This list contains " + d + " items. Are you sure you want to delete it?") ? c.destroy() : $(this).replaceWith(b)
          } else c.name = a, $(this).replaceWith(a)
        }))
      }
    }), c.el
  },
  renderView: function () {
    var a = this,
        b = 0,
        c = {},
        d = !1,
        e = {},
        f;
    return a.view = $(templates.ListView()).bind("touchstart", function (a) {
      if (a.touches.length == 2) {
        window.inAction = !0;
        var d = a.touches[0].pageX - a.touches[1].pageX,
            f = a.touches[0].pageY - a.touches[1].pageY;
        b = Math.sqrt(d * d + f * f), c = (a.touches[0].pageY + a.touches[1].pageY) / 2
      } else a.touches.length == 1 && (e.x1 = a.touches[0].pageX, e.y1 = a.touches[0].pageY)
    }).bind("touchmove", function (c) {
      if (!d && c.touches.length == 2 && !window.globalDragging) {
        var g = c.touches[0].pageX - c.touches[1].pageX,
            h = c.touches[0].pageY - c.touches[1].pageY,
            i = Math.sqrt(g * g + h * h);
        b - i > 80 ? (a.home.reset(), a.home.el.addClass("slow").css({
          "-webkit-transform": "translate3d(0,0,0)",
          opacity: 1
        }), a.view.find(".todo").addClass("slow").each(function (a, b) {
          $(this).css({
            "-webkit-transform": "translate3d(0,-" + this.offsetTop + "px,0)",
            opacity: 0
          })
        }), setTimeout(function () {
          a.home.el.removeClass("slow"), a.view.remove()
        }, 350), d = !0) : b - i < -50 && (d = !0)
      } else if (c.touches.length == 1 && !window.globalDragging) {
        e.dx = c.touches[0].pageX - e.x1, e.dy = c.touches[0].pageY - e.y1;
        if (window.innerHeight <= 356 && e.dy > 0 && !window.inAction) {
          window.draggingDown || (f = $(templates.newTodo("top")).addClass("drag").prependTo(a.view), a.view.addClass("drag"), window.draggingDown = !0);
          var j = e.dy * .4;
          a.view.css({
            "-webkit-transform": "translate3d(0," + (j >= 60 ? j - 60 : j) + "px,0)",
            top: j >= 60 ? "60px" : "0"
          }), f && (f.css({
            "-webkit-transform": "rotateX(" + Math.max((1 - j / 60) * 85, 0) + "deg)",
            opacity: j / 60 * .7 + .3
          }), f.find("input").val(j >= 60 ? "Release to create item" : "Pull to create item"))
        }
      }
    }).bind("touchend touchcancel", function (c) {
      window.inAction = !1, b = 0, d = !1, window.draggingDown && (window.draggingDown = !1, e.dy * .4 >= 60 && f ? (f.siblings().addClass("medium").css("opacity", .3), f.find("input").val("").focus().bind("blur", function () {
        window.editing = !1;
        var b = this.value;
        f.siblings().css("opacity", 1);
        if (!b) f.removeClass("drag").addClass("medium").css("-webkit-transform", "translate3d(-" + window.innerWidth + "px,0,0)"), setTimeout(function () {
          f.css("height", 0)
        }, 250), setTimeout(function () {
          a.resetView()
        }, 500);
        else {
          var c = new Todo(b);
          a.todos.unshift(c), setTimeout(function () {
            a.resetView()
          }, 250)
        }
      }), window.editing = !0) : f && (f.removeClass("drag").addClass("fast").css("-webkit-transform", "rotateX(85deg)"), setTimeout(function () {
        f.remove(), f = null
      }, 150)), a.view.removeClass("drag").css("-webkit-transform", "translate3d(0,0,0)"), e = {})
    }).bind("tap", function (b) {
      if (!window.editing) {
        window.editing = !0;
        var c = a.view.find("li.todo");
        c.addClass("slow").css("opacity", .3), setTimeout(function () {
          c.removeClass("slow")
        }, 350);
        var d = $(templates.newTodo("bottom")).bind("tap", function (a) {
          a.cancelBubble = !0
        }).addClass("slow").appendTo(a.view).css({
          "background-color": "hsl(" + (353 + a.count() * 10) + ", 95%, 53%)",
          opacity: 1
        });
        d.find("input").bind("focus", function () {
          this.value = ""
        }).bind("blur", function () {
          window.editing = !1, c.css("opacity", 1);
          var b = this.value;
          if (!b) d.css("-webkit-transform", "translate3d(-" + window.innerWidth + "px,0,0)"), setTimeout(function () {
            a.resetView()
          }, 350);
          else {
            var e = a.view.find("li.done");
            d.css("-webkit-transform", "translate3d(0,-" + e.length * 60 + "px,0)"), e.addClass("slow").css("-webkit-transform", "translate3d(0,60px,0)"), setTimeout(function () {
              a.todos.splice(a.count(), 0, new Todo(b)), a.resetView()
            }, 350)
          }
        }), setTimeout(function () {
          d.css("-webkit-transform", "rotateX(0deg)")
        }, 10)
      }
    }), a.todos.length > 0 ? ($.each(a.todos, function (b, c) {
      var d = c.render(a, b).css({
        "z-index": 99 - b,
        "-webkit-transform": "translate3d(0," + (a.el.offset().top - 60 * b) + "px,0)"
      });
      a.view.append(d)
    }), a.refreshView()) : a.view.html(templates.emptyListView()), setTimeout(function () {
      a.home.el.addClass("slow").css({
        "-webkit-transform": "translate3d(0,-" + a.home.el.height() + "px,0)",
        opacity: 0
      }), a.view.find(".todo").addClass("slow").css("-webkit-transform", "translate3d(0,0,0)")
    }, 10), setTimeout(function () {
      a.home.el.removeClass("slow"), a.resetView()
    }, 360), a.view
  },
  resetView: function () {
    var a = this;
    a.todos.length > 0 ? (a.view.empty().css("top", 0), $.each(a.todos, function (b, c) {
      var d = c.render(a, b).css({
        "z-index": 99 - b
      });
      a.view.append(d)
    }), a.refreshView()) : a.view.html(templates.emptyListView())
  },
  refreshView: function () {
    var a = this,
        b = a.view.find(".todo:not(.done)");
    b.each(function (a) {
      $(this).css("background-color", "hsl(" + (353 + a * Math.min(70 / b.length, 10)) + ",95%," + (a == 0 ? "48%" : "53%") + ")")
    })
  },
  destroy: function () {
    var a = this;
    a.el.addClass("medium").css("-webkit-transform", "translate3d(" + -window.innerWidth + "px, 0, 0)"), setTimeout(function () {
      a.el.css("height", 0)
    }, 250), setTimeout(function () {
      a.el.remove(), a.home.lists.splice(a.index, 1), a.home.reset()
    }, 500)
  },
  count: function () {
    var a = this,
        b = 0;
    for (var c = 0; c < a.todos.length; c++) a.todos[c].done || b++;
    return b
  }
};
var Home = function (a) {
  this.lists = a || []
};
Home.prototype = {
  render: function () {
    var a = this,
        b = {},
        c;
    return a.el = $(templates.Home()).bind("touchstart", function (a) {
      b.x1 = a.touches[0].pageX, b.y1 = a.touches[0].pageY
    }).bind("touchmove", function (d) {
      if (d.touches.length == 1 && !window.globalDragging) {
        b.dx = d.touches[0].pageX - b.x1, b.dy = d.touches[0].pageY - b.y1;
        if (window.innerHeight <= 356 && b.dy > 0 && !window.inAction) {
          window.draggingDown || (c = $(templates.newList("top")).addClass("drag").prependTo(a.el), a.el.addClass("drag"), window.draggingDown = !0);
          var e = b.dy * .4;
          a.el.css({
            "-webkit-transform": "translate3d(0," + (e >= 60 ? e - 60 : e) + "px,0)",
            top: e >= 60 ? "60px" : "0"
          }), c && (c.css({
            "-webkit-transform": "rotateX(" + Math.max((1 - e / 60) * 85, 0) + "deg)",
            opacity: e / 60 * .7 + .3
          }), c.find("input").val(e >= 60 ? "Release to create item" : "Pull to create item"))
        }
      }
    }).bind("touchend touchcancel", function () {
      window.draggingDown && (window.draggingDown = !1, b.dy * .4 >= 60 && c ? (c.siblings().addClass("medium").css("opacity", .3), c.find("input").val("").focus().bind("blur", function () {
        window.editing = !1;
        var b = this.value;
        c.siblings().css("opacity", 1);
        if (!b) c.removeClass("drag").addClass("medium").css("-webkit-transform", "translate3d(-" + window.innerWidth + "px,0,0)"), setTimeout(function () {
          c.css("height", 0)
        }, 250), setTimeout(function () {
          a.reset()
        }, 500);
        else {
          var d = new List(b, []);
          a.lists.unshift(d), setTimeout(function () {
            a.reset()
          }, 250)
        }
      }), window.editing = !0) : c && (c.removeClass("drag").addClass("fast").css("-webkit-transform", "rotateX(85deg)"), setTimeout(function () {
        c.remove(), c = null
      }, 150)), a.el.removeClass("drag").css("-webkit-transform", "translate3d(0,0,0)"), b = {})
    }).bind("tap", function (b) {
      if (!window.editing) {
        window.editing = !0;
        var c = a.el.find("li.list");
        c.addClass("slow").css("opacity", .3), setTimeout(function () {
          c.removeClass("slow")
        }, 350);
        var d = $(templates.newList("bottom")).bind("tap", function (a) {
          a.cancelBubble = !0
        }).addClass("slow").css({
          "background-color": "hsl(" + (212 - a.lists.length * 3) + ", 95%, 53%)",
          opacity: 1
        }).appendTo(a.el);
        d.find("input").bind("focus", function () {
          this.value = ""
        }).bind("blur", function () {
          window.editing = !1, c.css("opacity", 1);
          var b = this.value;
          b ? setTimeout(function () {
            a.lists.push(new List(b, [])), a.reset()
          }, 100) : (d.css("-webkit-transform", "translate3d(-" + window.innerWidth + "px,0,0)"), setTimeout(function () {
            a.reset()
          }, 350))
        }), setTimeout(function () {
          d.css("-webkit-transform", "rotateX(0deg)")
        }, 10)
      }
    }), a.reset(), a.el
  },
  reset: function () {
    var a = this;
    a.lists.length > 0 ? (a.el.empty().css("top", 0), $.each(a.lists, function (b, c) {
      a.el.append(c.renderSelf(a, b))
    }), a.refresh()) : a.el.html(templates.emptyHome())
  },
  refresh: function () {
    var a = this;
    a.el.find(".list").each(function (a) {
      $(this).css("background-color", "hsl(" + (212 - a * 3) + ", 100%, 53%)")
    })
  },
  resetIcons: function (a) {
    $("#cross, #check").show().css({
      top: a.offset().top + "px",
      opacity: 0,
      "-webkit-transform": "none"
    })
  }
}, $(function () {
  $(document).bind("touchmove", function (a) {
    window.inAction || window.editing || window.draggingDown || document.height <= 356 ? a.preventDefault() : window.globalDrag = !0
  }).bind("touchend touchcancel", function (a) {
    window.globalDrag = !1
  });
  var a = new Home([new List($.os.ios ? "Hello" : "This works better on iOS", [new Todo("Swipe right to complete"), new Todo("Swipe left to delete"), new Todo("Tap on text to edit"), new Todo("Long tap to change order"), new Todo("Drag down to add new"), new Todo("Pinch in to go back.")]), new List("This is a demo", [new Todo("Built with HTML5"), new Todo("CSS3"), new Todo("and Zepto.js")]), new List("by Evan You", [new Todo("@youyuxi"), new Todo("By the way"), new Todo("I'm looking for a job!"), new Todo("youyuxi.com")])]);
  a.render().appendTo("#wrapper")
});

.drag{-webkit-transition:all 0 cubic-bezier(0, 0, 0.2, 1) !important;}
.dragged{z-index:999 !important;box-shadow:0 1px 8px rgba(0, 0, 0, 0.3);-webkit-transition:all 0 cubic-bezier(0, 0, 0.2, 1) !important;}
.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;}
.bottom{z-index:999 !important;-webkit-transform-origin:50% 0%;-webkit-transform:rotatex(-100deg);opacity:.3;}
.top{z-index:999 !important;-webkit-transform-origin:50% 100%;-webkit-transform:rotatex(85deg);margin-bottom:-60px;position:relative;top:-60px;opacity:.3;}
body{width:100%;padding:0;margin:0;background-color:#000;color:#fff;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;overflow-x:hidden;}
ul{margin:0;padding:0;list-style-type:none;}
a{color:#fff;text-decoration:none;}
#wrapper{overflow-x:hidden;overflow-y:scroll;}
#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:-webkit-transform 0.15s ease,opacity 0.15s ease;-webkit-perspective:1000;-webkit-backface-visibility:hidden;}#home li.addmore,#listview li.addmore{line-height:60px;text-align:center;font-weight:bold;font-size:18px;color:#ccc;z-index:0;margin-bottom:-60px;}
#home{z-index:2;}
#listview{z-index:1;}
.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.07);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-user-select:none;-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;margin:0;position:relative;left:-1px;}
.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;}

Pop out