diff --git a/CHANGES.md b/CHANGES.md
index 3b39a84..8ab22e0 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -5,6 +5,9 @@ Improvements
- removed `-------New Event-------` log msg
- made groups collapsed by default
+Other:
+ - updated TodoMvc css
+
## v0.4.1 (2015-05-29)
Improvements:
diff --git a/examples/todomvc/resources/public/todos.css b/examples/todomvc/resources/public/todos.css
index 629b7fc..ba79a58 100644
--- a/examples/todomvc/resources/public/todos.css
+++ b/examples/todomvc/resources/public/todos.css
@@ -1,364 +1,348 @@
html,
body {
- margin: 0;
- padding: 0;
+ margin: 0;
+ padding: 0;
}
button {
- margin: 0;
- padding: 0;
- border: 0;
- background: none;
- font-size: 100%;
- vertical-align: baseline;
- font-family: inherit;
- font-weight: inherit;
- color: inherit;
- -webkit-appearance: none;
- -ms-appearance: none;
- appearance: none;
- -webkit-font-smoothing: antialiased;
- -moz-font-smoothing: antialiased;
- -ms-font-smoothing: antialiased;
- font-smoothing: antialiased;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: none;
+ font-size: 100%;
+ vertical-align: baseline;
+ font-family: inherit;
+ font-weight: inherit;
+ color: inherit;
+ -webkit-appearance: none;
+ appearance: none;
+ -webkit-font-smoothing: antialiased;
+ -moz-font-smoothing: antialiased;
+ font-smoothing: antialiased;
}
body {
- font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
- line-height: 1.4em;
- background: #f5f5f5;
- color: #4d4d4d;
- min-width: 230px;
- max-width: 550px;
- margin: 0 auto;
- -webkit-font-smoothing: antialiased;
- -moz-font-smoothing: antialiased;
- -ms-font-smoothing: antialiased;
- font-smoothing: antialiased;
- font-weight: 300;
+ font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ line-height: 1.4em;
+ background: #f5f5f5;
+ color: #4d4d4d;
+ min-width: 230px;
+ max-width: 550px;
+ margin: 0 auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-font-smoothing: antialiased;
+ font-smoothing: antialiased;
+ font-weight: 300;
}
button,
input[type="checkbox"] {
- outline: none;
+ outline: none;
}
.hidden {
- display: none;
+ display: none;
}
-#todoapp {
- background: #fff;
- margin: 130px 0 40px 0;
- position: relative;
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
- 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+.todoapp {
+ background: #fff;
+ margin: 130px 0 40px 0;
+ position: relative;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+ 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
-#todoapp input::-webkit-input-placeholder {
- font-style: italic;
- font-weight: 300;
- color: #e6e6e6;
+.todoapp input::-webkit-input-placeholder {
+ font-style: italic;
+ font-weight: 300;
+ color: #e6e6e6;
}
-#todoapp input::-moz-placeholder {
- font-style: italic;
- font-weight: 300;
- color: #e6e6e6;
+.todoapp input::-moz-placeholder {
+ font-style: italic;
+ font-weight: 300;
+ color: #e6e6e6;
}
-#todoapp input::input-placeholder {
- font-style: italic;
- font-weight: 300;
- color: #e6e6e6;
+.todoapp input::input-placeholder {
+ font-style: italic;
+ font-weight: 300;
+ color: #e6e6e6;
}
-#todoapp h1 {
- position: absolute;
- top: -155px;
- width: 100%;
- font-size: 100px;
- font-weight: 100;
- text-align: center;
- color: rgba(175, 47, 47, 0.15);
- -webkit-text-rendering: optimizeLegibility;
- -moz-text-rendering: optimizeLegibility;
- -ms-text-rendering: optimizeLegibility;
- text-rendering: optimizeLegibility;
+.todoapp h1 {
+ position: absolute;
+ top: -155px;
+ width: 100%;
+ font-size: 100px;
+ font-weight: 100;
+ text-align: center;
+ color: rgba(175, 47, 47, 0.15);
+ -webkit-text-rendering: optimizeLegibility;
+ -moz-text-rendering: optimizeLegibility;
+ text-rendering: optimizeLegibility;
}
-#new-todo,
+.new-todo,
.edit {
- position: relative;
- margin: 0;
- width: 100%;
- font-size: 24px;
- font-family: inherit;
- font-weight: 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);
- -ms-box-sizing: border-box;
- box-sizing: border-box;
- -webkit-font-smoothing: antialiased;
- -moz-font-smoothing: antialiased;
- -ms-font-smoothing: antialiased;
- font-smoothing: antialiased;
+ position: relative;
+ margin: 0;
+ width: 100%;
+ font-size: 24px;
+ font-family: inherit;
+ font-weight: 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);
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ -moz-font-smoothing: antialiased;
+ font-smoothing: antialiased;
}
-#new-todo {
- padding: 16px 16px 16px 60px;
- border: none;
- background: rgba(0, 0, 0, 0.003);
- box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+.new-todo {
+ padding: 16px 16px 16px 60px;
+ border: none;
+ background: rgba(0, 0, 0, 0.003);
+ box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
}
-#main {
- position: relative;
- z-index: 2;
- border-top: 1px solid #e6e6e6;
+.main {
+ position: relative;
+ z-index: 2;
+ border-top: 1px solid #e6e6e6;
}
label[for='toggle-all'] {
- display: none;
+ display: none;
}
-#toggle-all {
- position: absolute;
- top: -55px;
- left: -12px;
- width: 60px;
- height: 34px;
- text-align: center;
- border: none; /* Mobile Safari */
+.toggle-all {
+ position: absolute;
+ top: -55px;
+ left: -12px;
+ width: 60px;
+ height: 34px;
+ text-align: center;
+ border: none; /* Mobile Safari */
}
-#toggle-all:before {
- content: '❯';
- font-size: 22px;
- color: #e6e6e6;
- padding: 10px 27px 10px 27px;
+.toggle-all:before {
+ content: '❯';
+ font-size: 22px;
+ color: #e6e6e6;
+ padding: 10px 27px 10px 27px;
}
-#toggle-all:checked:before {
- color: #737373;
+.toggle-all:checked:before {
+ color: #737373;
}
-#todo-list {
- margin: 0;
- padding: 0;
- list-style: none;
+.todo-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
}
-#todo-list li {
- position: relative;
- font-size: 24px;
- border-bottom: 1px solid #ededed;
+.todo-list li {
+ position: relative;
+ font-size: 24px;
+ border-bottom: 1px solid #ededed;
}
-#todo-list li:last-child {
- border-bottom: none;
+.todo-list li:last-child {
+ border-bottom: none;
}
-#todo-list li.editing {
- border-bottom: none;
- padding: 0;
+.todo-list li.editing {
+ border-bottom: none;
+ padding: 0;
}
-#todo-list li.editing .edit {
- display: block;
- width: 506px;
- padding: 13px 17px 12px 17px;
- margin: 0 0 0 43px;
+.todo-list li.editing .edit {
+ display: block;
+ width: 506px;
+ padding: 13px 17px 12px 17px;
+ margin: 0 0 0 43px;
}
-#todo-list li.editing .view {
- display: none;
+.todo-list li.editing .view {
+ display: none;
}
-#todo-list li .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;
- -ms-appearance: none;
- appearance: none;
+.todo-list li .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;
+ appearance: none;
}
-#todo-list li .toggle:after {
- content: url('data:image/svg+xml;utf8,');
+.todo-list li .toggle:after {
+ content: url('data:image/svg+xml;utf8,');
}
-#todo-list li .toggle:checked:after {
- content: url('data:image/svg+xml;utf8,');
+.todo-list li .toggle:checked:after {
+ content: url('data:image/svg+xml;utf8,');
}
-#todo-list li label {
- white-space: pre;
- word-break: break-word;
- padding: 15px 60px 15px 15px;
- margin-left: 45px;
- display: block;
- line-height: 1.2;
- transition: color 0.4s;
+.todo-list li label {
+ white-space: pre;
+ word-break: break-word;
+ padding: 15px 60px 15px 15px;
+ margin-left: 45px;
+ display: block;
+ line-height: 1.2;
+ transition: color 0.4s;
}
-#todo-list li.completed label {
- color: #d9d9d9;
- text-decoration: line-through;
+.todo-list li.completed label {
+ color: #d9d9d9;
+ text-decoration: line-through;
}
-#todo-list li .destroy {
- display: none;
- position: absolute;
- top: 0;
- right: 10px;
- bottom: 0;
- width: 40px;
- height: 40px;
- margin: auto 0;
- font-size: 30px;
- color: #cc9a9a;
- margin-bottom: 11px;
- transition: color 0.2s ease-out;
+.todo-list li .destroy {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 10px;
+ bottom: 0;
+ width: 40px;
+ height: 40px;
+ margin: auto 0;
+ font-size: 30px;
+ color: #cc9a9a;
+ margin-bottom: 11px;
+ transition: color 0.2s ease-out;
}
-#todo-list li .destroy:hover {
- color: #af5b5e;
+.todo-list li .destroy:hover {
+ color: #af5b5e;
}
-#todo-list li .destroy:after {
- content: '×';
+.todo-list li .destroy:after {
+ content: '×';
}
-#todo-list li:hover .destroy {
- display: block;
+.todo-list li:hover .destroy {
+ display: block;
}
-#todo-list li .edit {
- display: none;
+.todo-list li .edit {
+ display: none;
}
-#todo-list li.editing:last-child {
- margin-bottom: -1px;
+.todo-list li.editing:last-child {
+ margin-bottom: -1px;
}
-#footer {
- color: #777;
- padding: 10px 15px;
- height: 20px;
- text-align: center;
- border-top: 1px solid #e6e6e6;
+.footer {
+ color: #777;
+ padding: 10px 15px;
+ height: 20px;
+ text-align: center;
+ border-top: 1px solid #e6e6e6;
}
-#footer:before {
- content: '';
- position: absolute;
- right: 0;
- bottom: 0;
- left: 0;
- height: 50px;
- overflow: hidden;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
- 0 8px 0 -3px #f6f6f6,
- 0 9px 1px -3px rgba(0, 0, 0, 0.2),
- 0 16px 0 -6px #f6f6f6,
- 0 17px 2px -6px rgba(0, 0, 0, 0.2);
+.footer:before {
+ content: '';
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ height: 50px;
+ overflow: hidden;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+ 0 8px 0 -3px #f6f6f6,
+ 0 9px 1px -3px rgba(0, 0, 0, 0.2),
+ 0 16px 0 -6px #f6f6f6,
+ 0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
-#todo-count {
- float: left;
- text-align: left;
+.todo-count {
+ float: left;
+ text-align: left;
}
-#todo-count strong {
- font-weight: 300;
+.todo-count strong {
+ font-weight: 300;
}
-#filters {
- margin: 0;
- padding: 0;
- list-style: none;
- position: absolute;
- right: 0;
- left: 0;
+.filters {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: absolute;
+ right: 0;
+ left: 0;
}
-#filters li {
- display: inline;
+.filters li {
+ display: inline;
}
-#filters li a {
- color: inherit;
- margin: 3px;
- padding: 3px 7px;
- text-decoration: none;
- border: 1px solid transparent;
- border-radius: 3px;
+.filters li a {
+ color: inherit;
+ margin: 3px;
+ padding: 3px 7px;
+ text-decoration: none;
+ border: 1px solid transparent;
+ border-radius: 3px;
}
-#filters li a.selected,
-#filters li a:hover {
- border-color: rgba(175, 47, 47, 0.1);
+.filters li a.selected,
+.filters li a:hover {
+ border-color: rgba(175, 47, 47, 0.1);
}
-#filters li a.selected {
- border-color: rgba(175, 47, 47, 0.2);
+.filters li a.selected {
+ border-color: rgba(175, 47, 47, 0.2);
}
-#clear-completed,
-html #clear-completed:active {
- float: right;
- position: relative;
- line-height: 20px;
- text-decoration: none;
- cursor: pointer;
- visibility: hidden;
- position: relative;
+.clear-completed,
+html .clear-completed:active {
+ float: right;
+ position: relative;
+ line-height: 20px;
+ text-decoration: none;
+ cursor: pointer;
+ position: relative;
}
-#clear-completed::after {
- visibility: visible;
- content: 'Clear completed';
- position: absolute;
- right: 0;
- white-space: nowrap;
+.clear-completed:hover {
+ text-decoration: underline;
}
-#clear-completed:hover::after {
- text-decoration: underline;
+.info {
+ margin: 65px auto 0;
+ color: #bfbfbf;
+ font-size: 10px;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ text-align: center;
}
-#info {
- margin: 65px auto 0;
- color: #bfbfbf;
- font-size: 10px;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
- text-align: center;
+.info p {
+ line-height: 1;
}
-#info p {
- line-height: 1;
+.info a {
+ color: inherit;
+ text-decoration: none;
+ font-weight: 400;
}
-#info a {
- color: inherit;
- text-decoration: none;
- font-weight: 400;
-}
-
-#info a:hover {
- text-decoration: underline;
+.info a:hover {
+ text-decoration: underline;
}
/*
@@ -366,29 +350,29 @@ html #clear-completed:active {
Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
- #toggle-all,
- #todo-list li .toggle {
- background: none;
- }
+ .toggle-all,
+ .todo-list li .toggle {
+ background: none;
+ }
- #todo-list li .toggle {
- height: 40px;
- }
+ .todo-list li .toggle {
+ height: 40px;
+ }
- #toggle-all {
- -webkit-transform: rotate(90deg);
- transform: rotate(90deg);
- -webkit-appearance: none;
- appearance: none;
- }
+ .toggle-all {
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ -webkit-appearance: none;
+ appearance: none;
+ }
}
@media (max-width: 430px) {
- #footer {
- height: 50px;
- }
+ .footer {
+ height: 50px;
+ }
- #filters {
- bottom: 10px;
- }
+ .filters {
+ bottom: 10px;
+ }
}
diff --git a/examples/todomvc/src/todomvc/views.cljs b/examples/todomvc/src/todomvc/views.cljs
index 45fb5ff..12b6624 100644
--- a/examples/todomvc/src/todomvc/views.cljs
+++ b/examples/todomvc/src/todomvc/views.cljs
@@ -32,17 +32,17 @@
props-for (fn [filter-kw txt]
[:a {:class (if (= filter-kw filter) "selected")
:href (str "#/" (name filter-kw))} txt])]
- [:footer#footer
+ [:footer.footer
[:div
- [:span#todo-count
+ [:span.todo-count
[:strong active] " " (case active 1 "item" "items") " left"]
- [:ul#filters
+ [:ul.filters
[:li (props-for :all "All")]
[:li (props-for :active "Active")]
[:li (props-for :done "Completed")]]
(when (pos? done)
- [:button#clear-completed {:on-click #(dispatch [:clear-completed])}
- "Clear completed " done])]]))))
+ [:button.clear-completed {:on-click #(dispatch [:clear-completed])}
+ "Clear completed"])]]))))
(defn todo-item
[]
@@ -64,7 +64,7 @@
(defn todo-list
[visible-todos]
- [:ul#todo-list
+ [:ul.todo-list
(for [todo @visible-todos]
^{:key (:id todo)} [todo-item todo])])
@@ -75,22 +75,21 @@
completed-count (subscribe [:completed-count])]
(fn []
[:div
- [:section#todoapp
+ [:section.todoapp
[:header#header
[:h1 "todos"]
- [todo-input {:id "new-todo"
+ [todo-input {:class "new-todo"
:placeholder "What needs to be done?"
:on-save #(dispatch [:add-todo %])}]]
(when-not (empty? @todos)
[:div
- [:section#main
- [:input#toggle-all
+ [:section.main
+ [:input.toggle-all
{:type "checkbox"
:checked (pos? @completed-count)
:on-change #(dispatch [:complete-all-toggle])}]
[:label {:for "toggle-all"} "Mark all as complete"]
[todo-list visible-todos]]
[stats-footer]])]
- [:footer#info
+ [:footer.info
[:p "Double-click to edit a todo"]]])))
-