From 087d0eccfb71a15528b89d6a84535a823758625e Mon Sep 17 00:00:00 2001 From: Samuel Miller Date: Wed, 12 Aug 2015 18:18:20 -0600 Subject: [PATCH] Updated TodoMvc css to newest version. Fixes some issues with #94 --- CHANGES.md | 3 + examples/todomvc/resources/public/todos.css | 534 ++++++++++---------- examples/todomvc/src/todomvc/views.cljs | 23 +- 3 files changed, 273 insertions(+), 287 deletions(-) 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"]]]))) -