Merge pull request #9 from Day8/feature/simple-example
Added two example projects taken from reagent
This commit is contained in:
Stuart Mitchell
commit
5f4f902a39
|
|
@ -0,0 +1,9 @@
|
|||
# Reagent example app now using re-frame
|
||||
|
||||
Run "`lein figwheel`" in a terminal to compile the app, and then open example.html.
|
||||
|
||||
Any changes to ClojureScript source files (in `src`) will be reflected in the running page immediately (while "`lein figwheel`" is running).
|
||||
|
||||
Run "`lein clean; lein with-profile prod compile`" to compile an optimized version.
|
||||
|
||||
Original reagent example code found at https://github.com/reagent-project/reagent
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
(ns simpleexample.dev
|
||||
(:require [simpleexample.core :as example]
|
||||
[figwheel.client :as fw]))
|
||||
|
||||
(fw/start {:on-jsload example/run
|
||||
:websocket-url "ws://localhost:3449/figwheel-ws"})
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
|
||||
div, h1, input {
|
||||
font-family: HelveticaNeue, Helvetica;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.example-clock {
|
||||
font-size: 128px;
|
||||
line-height: 1.2em;
|
||||
font-family: HelveticaNeue-UltraLight, Helvetica;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.example-clock {
|
||||
font-size: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.color-input, .color-input input {
|
||||
font-size: 24px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example</title>
|
||||
<link rel="stylesheet" href="example.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<h1>Reagent example app – see README.md</h1>
|
||||
</div>
|
||||
<script src="target/client.js"></script>
|
||||
<script>
|
||||
simpleexample.core.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
|
||||
(defproject simple-re-frame "0.5.0-alpha3"
|
||||
:dependencies [[org.clojure/clojure "1.6.0"]
|
||||
[org.clojure/clojurescript "0.0-2816"]
|
||||
[reagent "0.5.0-alpha3"]
|
||||
[re-frame "0.1.8"]
|
||||
[figwheel "0.2.3-SNAPSHOT"]]
|
||||
|
||||
:plugins [[lein-cljsbuild "1.0.4"]
|
||||
[lein-figwheel "0.2.3-SNAPSHOT"]]
|
||||
|
||||
:hooks [leiningen.cljsbuild]
|
||||
|
||||
:profiles {:dev {:cljsbuild
|
||||
{:builds {:client {:source-paths ["devsrc"]
|
||||
:compiler
|
||||
{:main simpleexample.dev
|
||||
:optimizations :none
|
||||
:source-map true
|
||||
:source-map-timestamp true}}}}}
|
||||
|
||||
:prod {:cljsbuild
|
||||
{:builds {:client {:compiler
|
||||
{:optimizations :advanced
|
||||
:elide-asserts true
|
||||
:pretty-print false}}}}}}
|
||||
|
||||
:figwheel {:repl false}
|
||||
|
||||
:cljsbuild {:builds {:client {:source-paths ["src"]
|
||||
:compiler
|
||||
{:output-dir "target/client"
|
||||
:output-to "target/client.js"}}}})
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
(ns simpleexample.core
|
||||
(:require-macros [reagent.ratom :refer [reaction]])
|
||||
(:require [reagent.core :as reagent :refer [atom]]
|
||||
[re-frame.core :refer [register-handler
|
||||
register-pure-handler
|
||||
pure
|
||||
register-sub
|
||||
dispatch
|
||||
subscribe]]))
|
||||
|
||||
(defonce timer (atom (js/Date.)))
|
||||
|
||||
(defonce time-updater (js/setInterval
|
||||
#(dispatch [:timer (js/Date.)]) 1000))
|
||||
|
||||
;;; this is the initial state
|
||||
(defonce initial-state
|
||||
{:timer (js/Date.)
|
||||
:time-color "#f34"})
|
||||
|
||||
;; Handlers
|
||||
;-------------------------------------------------------------
|
||||
|
||||
;; This handler sets the initial state
|
||||
(register-pure-handler
|
||||
;; register-pure-handler is a convience macro that will be used 90% of the
|
||||
;; time
|
||||
;; the handler is passed a map (not an atom) and must return the new state
|
||||
;; of the db
|
||||
:initialize
|
||||
(fn
|
||||
[db _]
|
||||
(merge db initial-state)))
|
||||
|
||||
;; This handler changes the color of the displayed time
|
||||
(register-handler
|
||||
;;; register-handler can take 3 arguments to allow you to insert middleware
|
||||
;;; see https://github.com/Day8/re-frame/wiki/Handler-Middleware
|
||||
:time-color
|
||||
pure
|
||||
(fn
|
||||
;; the first item in the second argument is :time-color the second is the
|
||||
;; new value
|
||||
[db [_ value]]
|
||||
(assoc db :time-color value)))
|
||||
|
||||
;; This handler changes the value of the time
|
||||
(register-handler
|
||||
;; This is a non-pure handler (NOT RECCOMENDED), no middleware is called
|
||||
;; and the app-db is passed directly as a atom.
|
||||
;; Note, there is no reason why this particular handler should not be pure
|
||||
:timer
|
||||
(fn
|
||||
;; the first item in the second argument is :timer the second is the
|
||||
;; new value
|
||||
[db [_ value]]
|
||||
(swap! db assoc :timer value)))
|
||||
|
||||
;; add subscriptions to :timer and :time-color
|
||||
(register-sub
|
||||
:timer
|
||||
(fn
|
||||
[db _]
|
||||
;; you need to wrap your subscription code in a reaction
|
||||
(reaction (:timer @db))))
|
||||
|
||||
(register-sub
|
||||
:time-color
|
||||
(fn
|
||||
[db _]
|
||||
;; you need to wrap your subscription code in a reaction
|
||||
(reaction (:time-color @db))))
|
||||
|
||||
(dispatch [:initialize])
|
||||
|
||||
|
||||
(defn greeting [message]
|
||||
[:h1 message])
|
||||
|
||||
(defn clock []
|
||||
(let [time-color (subscribe [:time-color])
|
||||
timer (subscribe [:timer])]
|
||||
;;; wrap your component in a function to use the suscription
|
||||
(fn []
|
||||
;; note that the initialize call will not be dispatched immediately
|
||||
;; as it is an async call
|
||||
(when @timer
|
||||
(let [time-str (-> @timer .toTimeString (clojure.string/split " ") first)]
|
||||
[:div.example-clock
|
||||
{:style {:color @time-color}}
|
||||
time-str])))))
|
||||
|
||||
(defn color-input []
|
||||
(let [time-color (subscribe [:time-color])]
|
||||
;;; wrap your component in a function to use the suscription
|
||||
(fn []
|
||||
[:div.color-input
|
||||
"Time color: "
|
||||
[:input {:type "text"
|
||||
:value @time-color
|
||||
:on-change #(dispatch
|
||||
[:time-color (-> % .-target .-value)])}]])))
|
||||
|
||||
(defn simple-example []
|
||||
[:div
|
||||
[greeting "Hello world, it is now"]
|
||||
[clock]
|
||||
[color-input]])
|
||||
|
||||
(defn ^:export run []
|
||||
(reagent/render [simple-example]
|
||||
(js/document.getElementById "app")))
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
# Reagent example app
|
||||
|
||||
Run "`lein figwheel`" in a terminal to compile the app, and then open example.html.
|
||||
|
||||
Any changes to ClojureScript source files (in `src`) will be reflected in the running page immediately (while "`lein figwheel`" is running).
|
||||
|
||||
Run "`lein clean; lein with-profile prod compile`" to compile an optimized version.
|
||||
|
||||
Original reagent example code found at https://github.com/reagent-project/reagent
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
(ns todomvc.dev
|
||||
(:require [todomvc.core :as example]
|
||||
[figwheel.client :as fw]))
|
||||
|
||||
(fw/start {:on-jsload example/run
|
||||
:websocket-url "ws://localhost:3449/figwheel-ws"})
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example</title>
|
||||
<link rel="stylesheet" href="todos.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<h1>Reagent example app – see README.md</h1>
|
||||
</div>
|
||||
<script src="target/client.js"></script>
|
||||
<script>
|
||||
todomvc.core.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
(defproject todomvc-re-frame "0.5.0-alpha3"
|
||||
:dependencies [[org.clojure/clojure "1.6.0"]
|
||||
[org.clojure/clojurescript "0.0-2816"]
|
||||
[reagent "0.5.0-alpha3"]
|
||||
[figwheel "0.2.3-SNAPSHOT"]
|
||||
[re-frame "0.1.8"]]
|
||||
|
||||
:plugins [[lein-cljsbuild "1.0.4"]
|
||||
[lein-figwheel "0.2.3-SNAPSHOT"]]
|
||||
|
||||
:hooks [leiningen.cljsbuild]
|
||||
|
||||
:profiles {:dev {:cljsbuild
|
||||
{:builds {:client {:source-paths ["devsrc"]
|
||||
:compiler
|
||||
{:main todomvc.dev
|
||||
:optimizations :none
|
||||
:source-map true
|
||||
:source-map-timestamp true}}}}}
|
||||
|
||||
:prod {:cljsbuild
|
||||
{:builds {:client {:compiler
|
||||
{:optimizations :advanced
|
||||
:elide-asserts true
|
||||
:pretty-print false}}}}}}
|
||||
|
||||
:figwheel {:repl false}
|
||||
|
||||
:cljsbuild {:builds {:client {:source-paths ["src"]
|
||||
:compiler
|
||||
{:output-dir "target/client"
|
||||
:output-to "target/client.js"}}}})
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
(ns todomvc.core
|
||||
(:require-macros [reagent.ratom :refer [reaction]])
|
||||
(:require [reagent.core :as reagent :refer [atom]]
|
||||
[re-frame.core :refer [register-pure-handler
|
||||
register-sub
|
||||
subscribe
|
||||
dispatch
|
||||
path]]))
|
||||
|
||||
(defonce initial-db
|
||||
{:todos (sorted-map)
|
||||
:counter 0})
|
||||
|
||||
(register-pure-handler
|
||||
:initialize
|
||||
(fn
|
||||
[db _]
|
||||
(dispatch [:add-todo "Rename Cloact to Reagent"])
|
||||
(dispatch [:add-todo "Add undo demo"])
|
||||
(dispatch [:add-todo "Make all rendering async"])
|
||||
(dispatch [:add-todo "Allow any arguments to component functions"])
|
||||
(dispatch [:add-todo "Use re-frame in the todomvc example"])
|
||||
(dispatch [:complete-all true])
|
||||
;; as the dispatches are async the next line is executed first
|
||||
(merge db initial-db)))
|
||||
|
||||
(register-pure-handler
|
||||
:add-todo
|
||||
(fn
|
||||
[db [_ text]]
|
||||
(let [id (inc (:counter db))]
|
||||
(-> db
|
||||
(assoc :counter id)
|
||||
(assoc-in [:todos id]
|
||||
{:id id :title text :done false})))))
|
||||
|
||||
(defn mmap [m f a] (->> m (f a) (into (empty m))))
|
||||
|
||||
(register-pure-handler
|
||||
:complete-all
|
||||
(path [:todos])
|
||||
(fn
|
||||
[todos [_ v]]
|
||||
(mmap todos map #(assoc-in % [1 :done] v))))
|
||||
|
||||
(register-pure-handler
|
||||
:toggle
|
||||
(path [:todos])
|
||||
(fn
|
||||
[todos [_ id]]
|
||||
(update-in todos [id :done] not)))
|
||||
|
||||
(register-pure-handler
|
||||
:save
|
||||
(path [:todos])
|
||||
(fn
|
||||
[todos [_ id title]]
|
||||
(assoc-in todos [id :title] title)))
|
||||
|
||||
(register-pure-handler
|
||||
:delete
|
||||
(path [:todos])
|
||||
(fn
|
||||
[todos [_ id]]
|
||||
(dissoc todos id)))
|
||||
|
||||
(register-pure-handler
|
||||
:clear-done
|
||||
(path [:todos])
|
||||
(fn
|
||||
[todos [_ v]]
|
||||
(mmap todos remove #(get-in % [1 :done]))))
|
||||
|
||||
(register-sub
|
||||
:counter
|
||||
(fn
|
||||
[db _]
|
||||
(reaction (:counter @db))))
|
||||
|
||||
(register-sub
|
||||
:todos
|
||||
(fn
|
||||
[db _]
|
||||
(reaction (:todos @db))))
|
||||
|
||||
(register-sub
|
||||
:items
|
||||
(fn
|
||||
[db _]
|
||||
(reaction (vals (:todos @db)))))
|
||||
|
||||
(register-sub
|
||||
:done
|
||||
(fn
|
||||
[db _]
|
||||
(reaction (->> @(subscribe [:items])
|
||||
(filter :done)
|
||||
count))))
|
||||
|
||||
(register-sub
|
||||
:active
|
||||
(fn
|
||||
[db _]
|
||||
(reaction (- (count @(subscribe [:items]))
|
||||
@(subscribe [:done])))))
|
||||
|
||||
|
||||
|
||||
(defonce init (dispatch [:initialize]))
|
||||
|
||||
(defn todo-input [{:keys [title on-save on-stop]}]
|
||||
(let [val (atom title)
|
||||
stop #(do (reset! val "")
|
||||
(if on-stop (on-stop)))
|
||||
save #(let [v (-> @val str clojure.string/trim)]
|
||||
(if-not (empty? v) (on-save v))
|
||||
(stop))]
|
||||
(fn [props]
|
||||
[:input (merge props
|
||||
{:type "text" :value @val :on-blur save
|
||||
:on-change #(reset! val (-> % .-target .-value))
|
||||
:on-key-down #(case (.-which %)
|
||||
13 (save)
|
||||
27 (stop)
|
||||
nil)})])))
|
||||
|
||||
(def todo-edit (with-meta todo-input
|
||||
{:component-did-mount #(.focus (reagent/dom-node %))}))
|
||||
|
||||
(defn todo-stats [{:keys [filt active done]}]
|
||||
(let [props-for (fn [name]
|
||||
{:class (if (= name @filt) "selected")
|
||||
:on-click #(reset! filt name)})]
|
||||
[:div
|
||||
[:span#todo-count
|
||||
[:strong active] " " (case active 1 "item" "items") " left"]
|
||||
[:ul#filters
|
||||
[:li [:a (props-for :all) "All"]]
|
||||
[:li [:a (props-for :active) "Active"]]
|
||||
[:li [:a (props-for :done) "Completed"]]]
|
||||
(when (pos? done)
|
||||
[:button#clear-completed {:on-click #(dispatch [:clear-done])}
|
||||
"Clear completed " done])]))
|
||||
|
||||
(defn todo-item []
|
||||
(let [editing (atom false)]
|
||||
(fn [{:keys [id done title]}]
|
||||
[:li {:class (str (if done "completed ")
|
||||
(if @editing "editing"))}
|
||||
[:div.view
|
||||
[:input.toggle {:type "checkbox" :checked done
|
||||
:on-change #(dispatch [:toggle id])}]
|
||||
[:label {:on-double-click #(reset! editing true)} title]
|
||||
[:button.destroy {:on-click #(dispatch [:delete id])}]]
|
||||
(when @editing
|
||||
[todo-edit {:class "edit" :title title
|
||||
:on-save #(dispatch [:save id %])
|
||||
:on-stop #(reset! editing false)}])])))
|
||||
|
||||
(defn todo-app [props]
|
||||
(let [todos (subscribe [:todos])
|
||||
items (subscribe [:items])
|
||||
done (subscribe [:done])
|
||||
active (subscribe [:active])]
|
||||
(fn []
|
||||
(let [filt (atom :all)]
|
||||
(fn []
|
||||
[:div
|
||||
[:section#todoapp
|
||||
[:header#header
|
||||
[:h1 "todos"]
|
||||
[todo-input {:id "new-todo"
|
||||
:placeholder "What needs to be done?"
|
||||
:on-save #(dispatch [:add-todo %])}]]
|
||||
(when (-> @items count pos?)
|
||||
[:div
|
||||
[:section#main
|
||||
[:input#toggle-all {:type "checkbox" :checked (zero? @active)
|
||||
:on-change #(dispatch
|
||||
[:complete-all
|
||||
(pos? @active)])}]
|
||||
[:label {:for "toggle-all"} "Mark all as complete"]
|
||||
[:ul#todo-list
|
||||
(for [todo (filter (case @filt
|
||||
:active (complement :done)
|
||||
:done :done
|
||||
:all identity) @items)]
|
||||
^{:key (:id todo)} [todo-item todo])]]
|
||||
[:footer#footer
|
||||
[todo-stats {:active @active :done @done :filt filt}]]])]
|
||||
[:footer#info
|
||||
[:p "Double-click to edit a todo"]]])))))
|
||||
|
||||
(defn ^:export run []
|
||||
(reagent/render [todo-app]
|
||||
(js/document.getElementById "app")))
|
||||
|
|
@ -0,0 +1,558 @@
|
|||
@charset "utf-8";
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
-webkit-appearance: none;
|
||||
-ms-appearance: none;
|
||||
-o-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
line-height: 1.4em;
|
||||
background: #eaeaea;
|
||||
/* background: #eaeaea url('bg.png'); */
|
||||
color: #4d4d4d;
|
||||
width: 550px;
|
||||
margin: 0 auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
-ms-font-smoothing: antialiased;
|
||||
-o-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="checkbox"] {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#todoapp {
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
margin: 130px 0 40px 0;
|
||||
border: 1px solid #ccc;
|
||||
position: relative;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
|
||||
0 25px 50px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
#todoapp:before {
|
||||
content: '';
|
||||
border-left: 1px solid #f5d6d6;
|
||||
border-right: 1px solid #f5d6d6;
|
||||
width: 2px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 40px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#todoapp input::-webkit-input-placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#todoapp input::-moz-placeholder {
|
||||
font-style: italic;
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
#todoapp h1 {
|
||||
position: absolute;
|
||||
top: -120px;
|
||||
width: 100%;
|
||||
font-size: 70px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #b3b3b3;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
|
||||
-webkit-text-rendering: optimizeLegibility;
|
||||
-moz-text-rendering: optimizeLegibility;
|
||||
-ms-text-rendering: optimizeLegibility;
|
||||
-o-text-rendering: optimizeLegibility;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
#header {
|
||||
padding-top: 15px;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
#header:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 15px;
|
||||
z-index: 2;
|
||||
border-bottom: 1px solid #6c615c;
|
||||
background: #8d7d77;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
|
||||
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
|
||||
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
|
||||
/* filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); */
|
||||
border-top-left-radius: 1px;
|
||||
border-top-right-radius: 1px;
|
||||
}
|
||||
|
||||
#new-todo,
|
||||
.edit {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-family: 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);
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
-ms-font-smoothing: antialiased;
|
||||
-o-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
#new-todo {
|
||||
padding: 16px 16px 16px 60px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
z-index: 2;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-top: 1px dotted #adadad;
|
||||
}
|
||||
|
||||
label[for='toggle-all'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toggle-all {
|
||||
position: absolute;
|
||||
top: -42px;
|
||||
left: -4px;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
/* Mobile Safari */
|
||||
border: none;
|
||||
}
|
||||
|
||||
#toggle-all:before {
|
||||
content: '»';
|
||||
font-size: 28px;
|
||||
color: #d9d9d9;
|
||||
padding: 0 25px 7px;
|
||||
}
|
||||
|
||||
#toggle-all:checked:before {
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
#todo-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#todo-list li {
|
||||
position: relative;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px dotted #ccc;
|
||||
}
|
||||
|
||||
#todo-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#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 .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;
|
||||
/* Mobile Safari */
|
||||
border: none;
|
||||
-webkit-appearance: none;
|
||||
-ms-appearance: none;
|
||||
-o-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
#todo-list li .toggle:after {
|
||||
content: '✔';
|
||||
/* 40 + a couple of pixels visual adjustment */
|
||||
line-height: 43px;
|
||||
font-size: 20px;
|
||||
color: #d9d9d9;
|
||||
text-shadow: 0 -1px 0 #bfbfbf;
|
||||
}
|
||||
|
||||
#todo-list li .toggle:checked:after {
|
||||
color: #85ada7;
|
||||
text-shadow: 0 1px 0 #669991;
|
||||
bottom: 1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#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;
|
||||
-webkit-transition: color 0.4s;
|
||||
transition: color 0.4s;
|
||||
}
|
||||
|
||||
#todo-list li.completed label {
|
||||
color: #a9a9a9;
|
||||
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: 22px;
|
||||
color: #a88a8a;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
#todo-list li .destroy:hover {
|
||||
text-shadow: 0 0 1px #000,
|
||||
0 0 10px rgba(199, 107, 107, 0.8);
|
||||
-webkit-transform: scale(1.3);
|
||||
-ms-transform: scale(1.3);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
#todo-list li .destroy:after {
|
||||
content: '✖';
|
||||
}
|
||||
|
||||
#todo-list li:hover .destroy {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#todo-list li .edit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#todo-list li.editing:last-child {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
color: #777;
|
||||
padding: 0 15px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -31px;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#footer:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 31px;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
z-index: -1;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
|
||||
0 6px 0 -3px rgba(255, 255, 255, 0.8),
|
||||
0 7px 1px -3px rgba(0, 0, 0, 0.3),
|
||||
0 43px 0 -6px rgba(255, 255, 255, 0.8),
|
||||
0 44px 2px -6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
#todo-count {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#filters {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#filters li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#filters li a {
|
||||
color: #83756f;
|
||||
margin: 2px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#filters li a.selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#clear-completed {
|
||||
float: right;
|
||||
position: relative;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
font-size: 11px;
|
||||
padding: 0 10px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
#clear-completed:hover {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#info {
|
||||
margin: 65px auto 0;
|
||||
color: #a6a6a6;
|
||||
font-size: 12px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#info a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
Hack to remove background from Mobile Safari.
|
||||
Can't use it globally since it destroys checkboxes in Firefox and Opera
|
||||
*/
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
#toggle-all,
|
||||
#todo-list li .toggle {
|
||||
background: none;
|
||||
}
|
||||
|
||||
#todo-list li .toggle {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#toggle-all {
|
||||
top: -56px;
|
||||
left: -15px;
|
||||
width: 65px;
|
||||
height: 41px;
|
||||
-webkit-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 20px 0;
|
||||
border: 0;
|
||||
border-top: 1px dashed #C5C5C5;
|
||||
border-bottom: 1px dashed #F7F7F7;
|
||||
}
|
||||
|
||||
.learn a {
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
color: #b83f45;
|
||||
}
|
||||
|
||||
.learn a:hover {
|
||||
text-decoration: underline;
|
||||
color: #787e7e;
|
||||
}
|
||||
|
||||
.learn h3,
|
||||
.learn h4,
|
||||
.learn h5 {
|
||||
margin: 10px 0;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.learn h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.learn h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.learn h5 {
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.learn ul {
|
||||
padding: 0;
|
||||
margin: 0 0 30px 25px;
|
||||
}
|
||||
|
||||
.learn li {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.learn p {
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
line-height: 1.3;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.quote {
|
||||
border: none;
|
||||
margin: 20px 0 60px 0;
|
||||
}
|
||||
|
||||
.quote p {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.quote p:before {
|
||||
content: '“';
|
||||
font-size: 50px;
|
||||
opacity: .15;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.quote p:after {
|
||||
content: '”';
|
||||
font-size: 50px;
|
||||
opacity: .15;
|
||||
position: absolute;
|
||||
bottom: -42px;
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
.quote footer {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.quote footer img {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.quote footer a {
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.speech-bubble {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, .04);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.speech-bubble:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 30px;
|
||||
border: 13px solid transparent;
|
||||
border-top-color: rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
.learn-bar > .learn {
|
||||
position: absolute;
|
||||
width: 272px;
|
||||
top: 8px;
|
||||
left: -300px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, .6);
|
||||
-webkit-transition-property: left;
|
||||
transition-property: left;
|
||||
-webkit-transition-duration: 500ms;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
@media (min-width: 899px) {
|
||||
.learn-bar {
|
||||
width: auto;
|
||||
margin: 0 0 0 300px;
|
||||
}
|
||||
|
||||
.learn-bar > .learn {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.learn-bar #todoapp {
|
||||
width: 550px;
|
||||
margin: 130px auto 40px auto;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue