half-pipe 0.3.0.alpha.2 → 0.3.0.alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. checksums.yaml +4 -4
  2. data/examples/todomvc-rails/.bowerrc +3 -0
  3. data/examples/todomvc-rails/.gitignore +20 -0
  4. data/examples/todomvc-rails/.jshintrc +34 -0
  5. data/examples/todomvc-rails/Gemfile +40 -0
  6. data/examples/todomvc-rails/Gruntfile.js +42 -0
  7. data/examples/todomvc-rails/README.rdoc +5 -0
  8. data/examples/todomvc-rails/Rakefile +6 -0
  9. data/examples/todomvc-rails/app/controllers/application_controller.rb +5 -0
  10. data/examples/todomvc-rails/app/controllers/concerns/.keep +0 -0
  11. data/examples/todomvc-rails/app/controllers/todos_controller.rb +69 -0
  12. data/examples/todomvc-rails/app/helpers/application_helper.rb +2 -0
  13. data/examples/todomvc-rails/app/helpers/todos_helper.rb +5 -0
  14. data/examples/todomvc-rails/app/mailers/.keep +0 -0
  15. data/examples/todomvc-rails/app/models/.keep +0 -0
  16. data/examples/todomvc-rails/app/models/concerns/.keep +0 -0
  17. data/examples/todomvc-rails/app/models/todo.rb +8 -0
  18. data/examples/todomvc-rails/app/scripts/main.js +53 -0
  19. data/examples/todomvc-rails/app/scripts/todo-title-input.js +57 -0
  20. data/examples/todomvc-rails/app/styles/base.scss +415 -0
  21. data/examples/todomvc-rails/app/styles/main.scss +2 -0
  22. data/examples/todomvc-rails/app/styles/todos.scss +29 -0
  23. data/examples/todomvc-rails/app/views/layouts/application.html.erb +14 -0
  24. data/examples/todomvc-rails/app/views/layouts/todos.js.erb +7 -0
  25. data/examples/todomvc-rails/app/views/todos/_destroy.js.erb +1 -0
  26. data/examples/todomvc-rails/app/views/todos/_footer.html.erb +21 -0
  27. data/examples/todomvc-rails/app/views/todos/_todo.html.erb +14 -0
  28. data/examples/todomvc-rails/app/views/todos/_toggle.js.erb +4 -0
  29. data/examples/todomvc-rails/app/views/todos/create.js.erb +3 -0
  30. data/examples/todomvc-rails/app/views/todos/destroy.js.erb +1 -0
  31. data/examples/todomvc-rails/app/views/todos/destroy_completed.js.erb +1 -0
  32. data/examples/todomvc-rails/app/views/todos/index.html.erb +33 -0
  33. data/examples/todomvc-rails/app/views/todos/toggle.js.erb +1 -0
  34. data/examples/todomvc-rails/app/views/todos/toggle_all.js.erb +1 -0
  35. data/examples/todomvc-rails/app/views/todos/update.js.erb +1 -0
  36. data/examples/todomvc-rails/bin/bundle +3 -0
  37. data/examples/todomvc-rails/bin/rails +4 -0
  38. data/examples/todomvc-rails/bin/rake +4 -0
  39. data/examples/todomvc-rails/bower.json +10 -0
  40. data/examples/todomvc-rails/config.ru +4 -0
  41. data/examples/todomvc-rails/config/application.rb +28 -0
  42. data/examples/todomvc-rails/config/boot.rb +4 -0
  43. data/examples/todomvc-rails/config/build.js +14 -0
  44. data/examples/todomvc-rails/config/database.yml +19 -0
  45. data/examples/todomvc-rails/config/environment.rb +5 -0
  46. data/examples/todomvc-rails/config/environments/development.rb +29 -0
  47. data/examples/todomvc-rails/config/environments/production.rb +80 -0
  48. data/examples/todomvc-rails/config/environments/test.rb +36 -0
  49. data/examples/todomvc-rails/config/half-pipe.json +3 -0
  50. data/examples/todomvc-rails/config/initializers/backtrace_silencers.rb +7 -0
  51. data/examples/todomvc-rails/config/initializers/filter_parameter_logging.rb +4 -0
  52. data/examples/todomvc-rails/config/initializers/inflections.rb +16 -0
  53. data/examples/todomvc-rails/config/initializers/mime_types.rb +5 -0
  54. data/examples/todomvc-rails/config/initializers/secret_token.rb +12 -0
  55. data/examples/todomvc-rails/config/initializers/session_store.rb +3 -0
  56. data/examples/todomvc-rails/config/initializers/wrap_parameters.rb +14 -0
  57. data/examples/todomvc-rails/config/locales/en.yml +23 -0
  58. data/examples/todomvc-rails/config/routes.rb +16 -0
  59. data/examples/todomvc-rails/db/migrate/20130518030840_create_todos.rb +9 -0
  60. data/examples/todomvc-rails/db/schema.rb +23 -0
  61. data/examples/todomvc-rails/db/seeds.rb +7 -0
  62. data/examples/todomvc-rails/lib/assets/.keep +0 -0
  63. data/examples/todomvc-rails/lib/tasks/.keep +0 -0
  64. data/examples/todomvc-rails/log/.keep +0 -0
  65. data/examples/todomvc-rails/package.json +22 -0
  66. data/examples/todomvc-rails/public/404.html +58 -0
  67. data/examples/todomvc-rails/public/422.html +58 -0
  68. data/examples/todomvc-rails/public/500.html +57 -0
  69. data/examples/todomvc-rails/public/favicon.ico +0 -0
  70. data/examples/todomvc-rails/public/robots.txt +5 -0
  71. data/examples/todomvc-rails/tasks/options/connect.js +63 -0
  72. data/examples/todomvc-rails/tasks/options/copy.js +28 -0
  73. data/examples/todomvc-rails/tasks/options/cssmin.js +3 -0
  74. data/examples/todomvc-rails/tasks/options/jshint.js +8 -0
  75. data/examples/todomvc-rails/tasks/options/rails.js +5 -0
  76. data/examples/todomvc-rails/tasks/options/requirejs.js +19 -0
  77. data/examples/todomvc-rails/tasks/options/sass.js +21 -0
  78. data/examples/todomvc-rails/tasks/options/watch.js +13 -0
  79. data/examples/todomvc-rails/test/controllers/.keep +0 -0
  80. data/examples/todomvc-rails/test/fixtures/.keep +0 -0
  81. data/examples/todomvc-rails/test/fixtures/todos.yml +11 -0
  82. data/examples/todomvc-rails/test/helpers/.keep +0 -0
  83. data/examples/todomvc-rails/test/integration/.keep +0 -0
  84. data/examples/todomvc-rails/test/mailers/.keep +0 -0
  85. data/examples/todomvc-rails/test/models/.keep +0 -0
  86. data/examples/todomvc-rails/test/models/todo_test.rb +7 -0
  87. data/examples/todomvc-rails/test/test_helper.rb +15 -0
  88. data/examples/todomvc-rails/vendor/assets/javascripts/.keep +0 -0
  89. data/examples/todomvc-rails/vendor/assets/stylesheets/.keep +0 -0
  90. data/lib/generators/half_pipe/install_generator.rb +2 -1
  91. data/lib/generators/half_pipe/templates/app/scripts/main.js +3 -5
  92. data/lib/generators/half_pipe/templates/config/build.js +4 -0
  93. data/lib/generators/half_pipe/templates/railties.rb +0 -1
  94. data/lib/generators/half_pipe/templates/tasks/options/copy.js +0 -1
  95. data/lib/half-pipe/version.rb +1 -1
  96. metadata +91 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 9e779c2dd9479a1245d628d0d1b9301df8273d89
4
- data.tar.gz: 7f7b736cf0996b856cdf9ef4a04b0bf894e398cc
3
+ metadata.gz: ef0b6df768ef367df6b366f16703de9345b4c36d
4
+ data.tar.gz: 8daf29daf4c6d00f3d9fb9c7e0f58c71aa58044f
5
5
  SHA512:
6
- metadata.gz: 25d694c6d65fdc4fb58901abc92c64d6e5a59a2cffb59a9cc3fb62f18a1d86e67148e27dc161ea0539fab5c312b858d61820f1a54c62a83524a1536e8acccef7
7
- data.tar.gz: 02acde5fa5bf06feabb6c6772f193a4ed29b4ae82421e8038dd4a098e78f7c85fdaf6fa7ac07abe3ccdb04b57c6058f2d7b136e578fe1afb7991285e947b356e
6
+ metadata.gz: b88bc561894217752b1cffec8144602ab41932f27ace516690d3690fabc523cd3d833f41822ec0d0b9bc66e4ebe3fff213b8ab7a4ba3c2de8d09310d2546c072
7
+ data.tar.gz: 6b762bcd300d6e25212e7e292b7b07e7de9bbacf86f0cadeac890429dda45cb0c1c1cf05a0b59a5d08cec254e779e22e8ffecf90f229ce5924cd1276ab73fd9d
@@ -0,0 +1,3 @@
1
+ {
2
+ "json": "bower.json"
3
+ }
@@ -0,0 +1,20 @@
1
+ # See http://help.github.com/ignore-files/ for more about ignoring files.
2
+ #
3
+ # If you find yourself ignoring temporary files generated by your text editor
4
+ # or operating system, you probably want to add a global ignore instead:
5
+ # git config --global core.excludesfile '~/.gitignore_global'
6
+
7
+ # Ignore bundler config.
8
+ /.bundle
9
+
10
+ # Ignore the default SQLite database.
11
+ /db/*.sqlite3
12
+ /db/*.sqlite3-journal
13
+
14
+ # Ignore all logfiles and tempfiles.
15
+ /log/*.log
16
+ /tmp
17
+ node_modules
18
+ bower_components
19
+ public/assets
20
+ .sass-cache
@@ -0,0 +1,34 @@
1
+ {
2
+ "camelcase": true,
3
+ "indent": 2,
4
+ "white": false,
5
+ "curly": true,
6
+ "eqeqeq": true,
7
+ "immed": true,
8
+ "latedef": true,
9
+ "newcap": false,
10
+ "noarg": true,
11
+ "sub": true,
12
+ "undef": true,
13
+ "boss": true,
14
+ "eqnull": true,
15
+ "browser": true,
16
+ "globals": {
17
+ "test": true,
18
+ "asyncTest": true,
19
+ "start": true,
20
+ "expect": true,
21
+ "module": true,
22
+ "define": true,
23
+ "sinon": true,
24
+ "require": true,
25
+ "console": true,
26
+ "Class": true,
27
+ "Events": true,
28
+ "Options": true,
29
+ "Element": true,
30
+ "$": true,
31
+ "$$": true
32
+ }
33
+ }
34
+
@@ -0,0 +1,40 @@
1
+ source 'https://rubygems.org'
2
+
3
+ ruby "2.0.0"
4
+
5
+ # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
6
+ gem 'rails', '~>4.0.0'
7
+
8
+ gem "pg"
9
+
10
+ # See https://github.com/sstephenson/execjs#readme for more supported runtimes
11
+ # gem 'therubyracer', platforms: :ruby
12
+
13
+ # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
14
+ gem 'jbuilder', '~> 1.0.1'
15
+
16
+ gem 'half-pipe', path: '../../'
17
+
18
+ group :development do
19
+ # Use sqlite3 as the database for Active Record
20
+ gem 'sqlite3'
21
+ end
22
+
23
+ group :doc do
24
+ # bundle exec rake doc:rails generates the API under doc/api.
25
+ gem 'sdoc', require: false
26
+ end
27
+
28
+ # Use ActiveModel has_secure_password
29
+ # gem 'bcrypt-ruby', '~> 3.0.0'
30
+
31
+ # Use unicorn as the app server
32
+ # gem 'unicorn'
33
+
34
+ # Use Capistrano for deployment
35
+ # gem 'capistrano', group: :development
36
+
37
+ # Use debugger
38
+ # gem 'debugger', group: [:development, :test]
39
+
40
+ gem "sass-css-importer", github: "joefiorini/sass-css-importer", branch: "load-paths"
@@ -0,0 +1,42 @@
1
+ /*global module:false*/
2
+ module.exports = function(grunt) {
3
+
4
+ require("load-grunt-tasks")(grunt);
5
+ grunt.loadNpmTasks('grunt-connect-proxy');
6
+
7
+ function config(name){
8
+ return require("./tasks/options/" + name);
9
+ }
10
+
11
+ // Project configuration.
12
+ grunt.initConfig({
13
+ // Metadata.
14
+ pkg: grunt.file.readJSON('package.json'),
15
+ dirs: grunt.file.readJSON('config/half-pipe.json'),
16
+ bowerOpts: grunt.file.readJSON('.bowerrc'),
17
+ jshint: config("jshint"),
18
+ sass: config("sass"),
19
+ cssmin: config("cssmin"),
20
+ requirejs: config("requirejs"),
21
+ connect: config("connect"),
22
+ copy: config("copy"),
23
+ watch: config("watch"),
24
+ rails: config("rails"),
25
+ clean: ['<%= dirs.tmp %>']
26
+ });
27
+
28
+ // Default task.
29
+ grunt.registerTask('default', 'build:debug');
30
+
31
+ // Configure asset building pipeline
32
+ grunt.registerTask('build', ['build:debug']);
33
+ grunt.registerTask('build:debug', ['clean', 'copy:prepare', 'requirejs:debug', 'sass:debug']);
34
+ grunt.registerTask('build:public', ['clean', 'copy:prepare', 'requirejs:public', 'sass:public', 'copy:finalize']);
35
+
36
+ // Configure preview server
37
+ grunt.registerTask('server', ['server:debug']);
38
+ grunt.registerTask('server:debug', ['build:debug', 'configureProxies', 'connect:debug', 'rails:server:start', 'watch']);
39
+ grunt.registerTask('server:public', ['build:public', 'configureProxies', 'connect:public:keepalive']);
40
+
41
+ };
42
+
@@ -0,0 +1,5 @@
1
+ == TodoMVC on Rails
2
+
3
+ I built the TodoMVC app according to its spec using only Rails 4 and a hint of javascript. See my article for more details
4
+
5
+ http://www.mattdeleon.net/
@@ -0,0 +1,6 @@
1
+ # Add your own tasks in files placed in lib/tasks ending in .rake,
2
+ # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
3
+
4
+ require File.expand_path('../config/application', __FILE__)
5
+
6
+ Todos::Application.load_tasks
@@ -0,0 +1,5 @@
1
+ class ApplicationController < ActionController::Base
2
+ # Prevent CSRF attacks by raising an exception.
3
+ # For APIs, you may want to use :null_session instead.
4
+ protect_from_forgery with: :exception
5
+ end
@@ -0,0 +1,69 @@
1
+ class TodosController < ApplicationController
2
+ helper_method :current_filter
3
+
4
+ def index
5
+ @todos = Todo
6
+ end
7
+
8
+ def active
9
+ @todos = Todo.active
10
+
11
+ set_current_filter(:active)
12
+
13
+ render :index
14
+ end
15
+
16
+ def completed
17
+ @todos = Todo.completed
18
+
19
+ set_current_filter(:completed)
20
+
21
+ render :index
22
+ end
23
+
24
+ def create
25
+ @todo = Todo.new(todo_params)
26
+ @todo.save
27
+ end
28
+
29
+ def update
30
+ @todo = Todo.find(params[:id])
31
+ @todo.update(todo_params)
32
+ end
33
+
34
+ def destroy_completed
35
+ @todos_for_destruction = Todo.completed.all
36
+
37
+ Todo.completed.destroy_all
38
+ end
39
+
40
+ def destroy
41
+ @todo = Todo.find(params[:id])
42
+ @todo.destroy
43
+ end
44
+
45
+ def toggle
46
+ @todo = Todo.find(params[:id])
47
+ @todo.toggle!(:completed)
48
+ end
49
+
50
+ def toggle_all
51
+ Todo.update_all(completed: params[:completed] ? 't' : 'f')
52
+
53
+ @todos = Todo.all
54
+ end
55
+
56
+ private
57
+
58
+ def todo_params
59
+ params.require(:todo).permit(:title, :completed)
60
+ end
61
+
62
+ def set_current_filter(filter)
63
+ @current_filter = filter
64
+ end
65
+
66
+ def current_filter
67
+ @current_filter
68
+ end
69
+ end
@@ -0,0 +1,2 @@
1
+ module ApplicationHelper
2
+ end
@@ -0,0 +1,5 @@
1
+ module TodosHelper
2
+ def todos_filter_class
3
+ "filtered " + current_filter.to_s
4
+ end
5
+ end
@@ -0,0 +1,8 @@
1
+ class Todo < ActiveRecord::Base
2
+ scope :completed, -> { where("completed = ?", true) }
3
+ scope :active, -> { where("completed = ?", false) }
4
+
5
+ def title=(title)
6
+ write_attribute(:title, title.strip)
7
+ end
8
+ end
@@ -0,0 +1,53 @@
1
+ 'use strict';
2
+
3
+ define('todos',
4
+ [
5
+ 'todo-title-input',
6
+ 'jquery',
7
+ 'jquery-ujs'
8
+ ],
9
+
10
+ function(TodoTitleInput, $){
11
+
12
+ // Add your initialization code here
13
+
14
+ $.fn.todoTitleInput = function() {
15
+ return this.each(function() {
16
+ var data;
17
+ data = $.data(this, 'todoTitleInput');
18
+ if (!data) {
19
+ return data = $.data(this, 'todoTitleInput', new TodoTitleInput(this));
20
+ }
21
+ });
22
+ };
23
+
24
+ $(document).on("keypress", "[data-behavior~=submit_on_enter]", function(e) {
25
+ if (e.keyCode === 13) {
26
+ if ($(this).val().trim().length) {
27
+ $(this).closest("form").submit();
28
+ }
29
+ return e.preventDefault();
30
+ }
31
+ });
32
+
33
+ $(document).on("click", "[data-behavior~=submit_on_check]", function() {
34
+ return $(this).closest("form").submit();
35
+ });
36
+
37
+ $(document).on("dblclick", "[data-behavior~=todo_title]", function() {
38
+ $(this).closest("li").addClass("editing").siblings().removeClass("editing");
39
+ return $(this).closest("li").find("[data-behavior~=todo_title_input]").focus();
40
+ });
41
+
42
+ $(document).on("focus", "[data-behavior~=todo_title_input]", function() {
43
+ return $(this).todoTitleInput();
44
+ });
45
+
46
+ $(document).on("ajax:before", "form[data-remote]", function() {
47
+ return $(this).addClass("submitting");
48
+ });
49
+
50
+ $(document).on("ajax:complete", "form[data-remote]", function() {
51
+ return $(this).removeClass("submitting");
52
+ });
53
+ });
@@ -0,0 +1,57 @@
1
+ define(['jquery'], function($) {
2
+
3
+ return function() {
4
+
5
+ function TodoTitleInput(input) {
6
+ var _this = this;
7
+ this.$input = $(input);
8
+ this.$input.on("keypress", function(e) {
9
+ return _this.keypress(e);
10
+ });
11
+ this.$input.on("blur", function(e) {
12
+ return _this.blur(e);
13
+ });
14
+ }
15
+
16
+ TodoTitleInput.prototype.keypress = function(e) {
17
+ if (e.keyCode === 27) {
18
+ return this.handleEscape();
19
+ } else if (e.keyCode === 13) {
20
+ return this.handleEnter();
21
+ }
22
+ };
23
+
24
+ TodoTitleInput.prototype.blur = function() {
25
+ return this.submitFormOrDestroy();
26
+ };
27
+
28
+ TodoTitleInput.prototype.handleEscape = function() {
29
+ return this.$input.val(this.$input.data("original-value")).parents("li").removeClass("editing");
30
+ };
31
+
32
+ TodoTitleInput.prototype.handleEnter = function() {
33
+ this.submitFormOrDestroy();
34
+ return false;
35
+ };
36
+
37
+ TodoTitleInput.prototype.submitFormOrDestroy = function() {
38
+ if (this.$input.val().trim().length === 0) {
39
+ return this.destroyTodo();
40
+ } else {
41
+ return this.submitForm();
42
+ }
43
+ };
44
+
45
+ TodoTitleInput.prototype.submitForm = function() {
46
+ return this.$input.parents("form").submit();
47
+ };
48
+
49
+ TodoTitleInput.prototype.destroyTodo = function() {
50
+ return this.$input.parents("li").find(".destroy").click();
51
+ };
52
+
53
+ return TodoTitleInput;
54
+
55
+ }
56
+
57
+ });
@@ -0,0 +1,415 @@
1
+
2
+ html,
3
+ body {
4
+ margin: 0;
5
+ padding: 0;
6
+ }
7
+
8
+ button {
9
+ margin: 0;
10
+ padding: 0;
11
+ border: 0;
12
+ background: none;
13
+ font-size: 100%;
14
+ vertical-align: baseline;
15
+ font-family: inherit;
16
+ color: inherit;
17
+ -webkit-appearance: none;
18
+ /*-moz-appearance: none;*/
19
+ -ms-appearance: none;
20
+ -o-appearance: none;
21
+ appearance: none;
22
+ }
23
+
24
+ body {
25
+ font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
26
+ line-height: 1.4em;
27
+ background: #eaeaea image-url('bg.png');
28
+ color: #4d4d4d;
29
+ width: 550px;
30
+ margin: 0 auto;
31
+ -webkit-font-smoothing: antialiased;
32
+ -moz-font-smoothing: antialiased;
33
+ -ms-font-smoothing: antialiased;
34
+ -o-font-smoothing: antialiased;
35
+ font-smoothing: antialiased;
36
+ }
37
+
38
+ #todoapp {
39
+ background: #fff;
40
+ background: rgba(255, 255, 255, 0.9);
41
+ margin: 130px 0 40px 0;
42
+ border: 1px solid #ccc;
43
+ position: relative;
44
+ border-top-left-radius: 2px;
45
+ border-top-right-radius: 2px;
46
+ box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
47
+ 0 25px 50px 0 rgba(0, 0, 0, 0.15);
48
+ }
49
+
50
+ #todoapp:before {
51
+ content: '';
52
+ border-left: 1px solid #f5d6d6;
53
+ border-right: 1px solid #f5d6d6;
54
+ width: 2px;
55
+ position: absolute;
56
+ top: 0;
57
+ left: 40px;
58
+ height: 100%;
59
+ }
60
+
61
+ #todoapp input::-webkit-input-placeholder {
62
+ font-style: italic;
63
+ }
64
+
65
+ #todoapp input:-moz-placeholder {
66
+ font-style: italic;
67
+ color: #a9a9a9;
68
+ }
69
+
70
+ #todoapp h1 {
71
+ position: absolute;
72
+ top: -120px;
73
+ width: 100%;
74
+ font-size: 70px;
75
+ font-weight: bold;
76
+ text-align: center;
77
+ color: #b3b3b3;
78
+ color: rgba(255, 255, 255, 0.3);
79
+ text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
80
+ -webkit-text-rendering: optimizeLegibility;
81
+ -moz-text-rendering: optimizeLegibility;
82
+ -ms-text-rendering: optimizeLegibility;
83
+ -o-text-rendering: optimizeLegibility;
84
+ text-rendering: optimizeLegibility;
85
+ }
86
+
87
+ #header {
88
+ padding-top: 15px;
89
+ border-radius: inherit;
90
+ }
91
+
92
+ #header:before {
93
+ content: '';
94
+ position: absolute;
95
+ top: 0;
96
+ right: 0;
97
+ left: 0;
98
+ height: 15px;
99
+ z-index: 2;
100
+ border-bottom: 1px solid #6c615c;
101
+ background: #8d7d77;
102
+ background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
103
+ background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
104
+ background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
105
+ background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
106
+ background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
107
+ background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
108
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
109
+ border-top-left-radius: 1px;
110
+ border-top-right-radius: 1px;
111
+ }
112
+
113
+ #new-todo,
114
+ .edit {
115
+ position: relative;
116
+ margin: 0;
117
+ width: 100%;
118
+ font-size: 24px;
119
+ font-family: inherit;
120
+ line-height: 1.4em;
121
+ border: 0;
122
+ outline: none;
123
+ color: inherit;
124
+ padding: 6px;
125
+ border: 1px solid #999;
126
+ box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
127
+ -webkit-box-sizing: border-box;
128
+ -moz-box-sizing: border-box;
129
+ -ms-box-sizing: border-box;
130
+ -o-box-sizing: border-box;
131
+ box-sizing: border-box;
132
+ -webkit-font-smoothing: antialiased;
133
+ -moz-font-smoothing: antialiased;
134
+ -ms-font-smoothing: antialiased;
135
+ -o-font-smoothing: antialiased;
136
+ font-smoothing: antialiased;
137
+ }
138
+
139
+ #new-todo {
140
+ padding: 16px 16px 16px 60px;
141
+ border: none;
142
+ background: rgba(0, 0, 0, 0.02);
143
+ z-index: 2;
144
+ box-shadow: none;
145
+ }
146
+
147
+ #main {
148
+ position: relative;
149
+ z-index: 2;
150
+ border-top: 1px dotted #adadad;
151
+ }
152
+
153
+ label[for='toggle-all'] {
154
+ display: none;
155
+ }
156
+
157
+ #toggle-all {
158
+ position: absolute;
159
+ top: -42px;
160
+ left: -4px;
161
+ width: 40px;
162
+ text-align: center;
163
+ border: none; /* Mobile Safari */
164
+ }
165
+
166
+ #toggle-all:before {
167
+ content: '»';
168
+ font-size: 28px;
169
+ color: #d9d9d9;
170
+ padding: 0 25px 7px;
171
+ }
172
+
173
+ #toggle-all:checked:before {
174
+ color: #737373;
175
+ }
176
+
177
+ #todo-list {
178
+ margin: 0;
179
+ padding: 0;
180
+ list-style: none;
181
+ }
182
+
183
+ #todo-list li {
184
+ position: relative;
185
+ font-size: 24px;
186
+ border-bottom: 1px dotted #ccc;
187
+ }
188
+
189
+ #todo-list li:last-child {
190
+ border-bottom: none;
191
+ }
192
+
193
+ #todo-list li.editing {
194
+ border-bottom: none;
195
+ padding: 0;
196
+ }
197
+
198
+ #todo-list li.editing .edit {
199
+ display: block;
200
+ width: 506px;
201
+ padding: 13px 17px 12px 17px;
202
+ margin: 0 0 0 43px;
203
+ }
204
+
205
+ #todo-list li.editing .view {
206
+ display: none;
207
+ }
208
+
209
+ #todo-list li .toggle {
210
+ text-align: center;
211
+ width: 40px;
212
+ /* auto, since non-WebKit browsers doesn't support input styling */
213
+ height: auto;
214
+ position: absolute;
215
+ top: 0;
216
+ bottom: 0;
217
+ margin: auto 0;
218
+ border: none; /* Mobile Safari */
219
+ -webkit-appearance: none;
220
+ /*-moz-appearance: none;*/
221
+ -ms-appearance: none;
222
+ -o-appearance: none;
223
+ appearance: none;
224
+ }
225
+
226
+ #todo-list li .toggle:after {
227
+ content: '✔';
228
+ line-height: 43px; /* 40 + a couple of pixels visual adjustment */
229
+ font-size: 20px;
230
+ color: #d9d9d9;
231
+ text-shadow: 0 -1px 0 #bfbfbf;
232
+ }
233
+
234
+ #todo-list li .toggle:checked:after {
235
+ color: #85ada7;
236
+ text-shadow: 0 1px 0 #669991;
237
+ bottom: 1px;
238
+ position: relative;
239
+ }
240
+
241
+ #todo-list li label {
242
+ word-break: break-word;
243
+ padding: 15px;
244
+ margin-left: 45px;
245
+ display: block;
246
+ line-height: 1.2;
247
+ -webkit-transition: color 0.4s;
248
+ -moz-transition: color 0.4s;
249
+ -ms-transition: color 0.4s;
250
+ -o-transition: color 0.4s;
251
+ transition: color 0.4s;
252
+ }
253
+
254
+ #todo-list li.completed label {
255
+ color: #a9a9a9;
256
+ text-decoration: line-through;
257
+ }
258
+
259
+ #todo-list li .destroy {
260
+ display: none;
261
+ position: absolute;
262
+ top: 0;
263
+ right: 10px;
264
+ bottom: 0;
265
+ width: 40px;
266
+ height: 40px;
267
+ margin: auto 0;
268
+ font-size: 22px;
269
+ color: #a88a8a;
270
+ -webkit-transition: all 0.2s;
271
+ -moz-transition: all 0.2s;
272
+ -ms-transition: all 0.2s;
273
+ -o-transition: all 0.2s;
274
+ transition: all 0.2s;
275
+ }
276
+
277
+ #todo-list li .destroy:hover {
278
+ text-shadow: 0 0 1px #000,
279
+ 0 0 10px rgba(199, 107, 107, 0.8);
280
+ -webkit-transform: scale(1.3);
281
+ -moz-transform: scale(1.3);
282
+ -ms-transform: scale(1.3);
283
+ -o-transform: scale(1.3);
284
+ transform: scale(1.3);
285
+ }
286
+
287
+ #todo-list li .destroy:after {
288
+ content: '✖';
289
+ }
290
+
291
+ #todo-list li:hover .destroy {
292
+ display: block;
293
+ }
294
+
295
+ #todo-list li .edit {
296
+ display: none;
297
+ }
298
+
299
+ #todo-list li.editing:last-child {
300
+ margin-bottom: -1px;
301
+ }
302
+
303
+ #footer {
304
+ color: #777;
305
+ padding: 0 15px;
306
+ position: absolute;
307
+ right: 0;
308
+ bottom: -31px;
309
+ left: 0;
310
+ height: 20px;
311
+ z-index: 1;
312
+ text-align: center;
313
+ }
314
+
315
+ #footer:before {
316
+ content: '';
317
+ position: absolute;
318
+ right: 0;
319
+ bottom: 31px;
320
+ left: 0;
321
+ height: 50px;
322
+ z-index: -1;
323
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
324
+ 0 6px 0 -3px rgba(255, 255, 255, 0.8),
325
+ 0 7px 1px -3px rgba(0, 0, 0, 0.3),
326
+ 0 43px 0 -6px rgba(255, 255, 255, 0.8),
327
+ 0 44px 2px -6px rgba(0, 0, 0, 0.2);
328
+ }
329
+
330
+ #todo-count {
331
+ float: left;
332
+ text-align: left;
333
+ }
334
+
335
+ #filters {
336
+ margin: 0;
337
+ padding: 0;
338
+ list-style: none;
339
+ position: absolute;
340
+ right: 0;
341
+ left: 0;
342
+ }
343
+
344
+ #filters li {
345
+ display: inline;
346
+ }
347
+
348
+ #filters li a {
349
+ color: #83756f;
350
+ margin: 2px;
351
+ text-decoration: none;
352
+ }
353
+
354
+ #filters li a.selected {
355
+ font-weight: bold;
356
+ }
357
+
358
+ #clear-completed {
359
+ float: right;
360
+ position: relative;
361
+ line-height: 20px;
362
+ text-decoration: none;
363
+ background: rgba(0, 0, 0, 0.1);
364
+ font-size: 11px;
365
+ padding: 0 10px;
366
+ border-radius: 3px;
367
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
368
+ }
369
+
370
+ #clear-completed:hover {
371
+ background: rgba(0, 0, 0, 0.15);
372
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
373
+ }
374
+
375
+ #info {
376
+ margin: 65px auto 0;
377
+ color: #a6a6a6;
378
+ font-size: 12px;
379
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
380
+ text-align: center;
381
+ }
382
+
383
+ #info a {
384
+ color: inherit;
385
+ }
386
+
387
+ /*
388
+ Hack to remove background from Mobile Safari.
389
+ Can't use it globally since it destroys checkboxes in Firefox and Opera
390
+ */
391
+ @media screen and (-webkit-min-device-pixel-ratio:0) {
392
+ #toggle-all,
393
+ #todo-list li .toggle {
394
+ background: none;
395
+ }
396
+
397
+ #todo-list li .toggle {
398
+ height: 40px;
399
+ }
400
+
401
+ #toggle-all {
402
+ top: -56px;
403
+ left: -15px;
404
+ width: 65px;
405
+ height: 41px;
406
+ -webkit-transform: rotate(90deg);
407
+ transform: rotate(90deg);
408
+ -webkit-appearance: none;
409
+ appearance: none;
410
+ }
411
+ }
412
+
413
+ .hidden{
414
+ display:none;
415
+ }