Use lein-less to do css preprocessing

closes #61

README.md

@@ -99,3 +99,26 @@ You need both the re-frame-trace project _and_ a test project to develop it agai
   ```
 
 - Now run your test project however you usually run it, and re-frame-trace should be in there. \o/
+
+- Additionally, if modifying the `.less` CSS files, compile the css by running within the re-frame-trace directory:
+
+  ```
+  lein less auto
+  ```
+
+  to watch for changes, or one time by running:
+
+  ```
+  lein less once
+  ```
+
+
+### Developing CSS
+
+The CSS for the trace panel are defined both inline and within `src/day8/re_frame/less`. To develop the styles, run
+
+```
+lein less auto
+```
+
+and the .less file will automatically compile to css on file changes. Don't edit the file within `src/day8/re_frame/css` directly, or it will be overwriten. We are using css preprocessing because in order to isolate the panel styles, we are namespacing the panell styles with the id `#--re-frame-trace--`.

project.clj

@@ -7,6 +7,13 @@
                  [reagent                    "0.6.0"]
                  [re-frame                   "0.9.0"]
                  [cljsjs/d3 "4.2.2-0"]]
+  :plugins [[lein-less "1.7.5"]]
   :deploy-repositories {"releases" :clojars
                         "snapshots" :clojars}
+
+  :figwheel {:css-dirs ["src/day8/re_frame/css"]}
+
+  :less {:source-paths ["src/day8/re_frame/less"]
+         :target-path  "src/day8/re_frame/css"}
+
   :profiles {:dev {:dependencies [[binaryage/dirac "RELEASE"]]}})

src/day8/re_frame/less/main.less

@@ -0,0 +1,108 @@
+#--re-frame-trace-- {
+  background: white;
+  color: black;
+  font-family: 'courier new', monospace;
+
+  tbody {
+    color: #aaa;
+  }
+  tr:hover {
+    transition: all 0.1s ease-out;
+    background: aliceblue;
+    filter: brightness(90%);
+  }
+  tr:nth-child(even) {
+    background: aliceblue;
+  }
+  .button {
+    padding: 5px 5px 3px;
+    margin: 5px;
+    border-radius: 2px;
+    cursor: pointer;
+  }
+  .text-button {
+    border-bottom: 1px dotted #888;
+    font-weight: normal;
+  }
+  .button:focus, .text-button:focus {
+    border-radius: 2px 2px 0 0;
+    -webkit-box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
+    -moz-box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
+    box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
+  }
+  .icon-button {
+    font-size: 10px;
+  }
+  button.tab {
+
+  }
+  .tab {
+    background: transparent;
+    border-radius: 0;
+    text-transform: uppercase;
+    font-family: monospace;
+    letter-spacing: 2px;
+    margin-bottom: 0;
+    padding-bottom: 4px;
+    vertical-align: bottom;
+  }
+  .tab.active {
+    background: transparent;
+    border-bottom: 3px solid lightblue;
+    border-radius: 0;
+    padding-bottom: 1px;
+  }
+  ul.filter-items {
+    list-style-type: none;
+    padding: 0;
+    margin: 0 -5px;
+    margin-top: 10px;
+  }
+  .filter-items li {
+    color: #333;
+    background: #efefef;
+    display: inline-block;
+    font-size: 0.9em;
+    margin:  5px;
+  }
+  .filter-items {
+    li {
+      .filter-item-string {
+        color: #616cdb;
+      }
+    }
+
+  }
+  .icon {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    stroke-width: 0;
+    stroke: currentColor;
+    fill: currentColor;
+  }
+  .icon-remove {
+    margin-left: 10px;
+  }
+  select {
+    background: white;
+    font-family: 'courier new', monospace;
+    font-size: 1em;
+  }
+  .nav {
+    background: #efeef1;
+    color: #222;
+  }
+  .panel-content-top {
+    flex: 1;
+  }
+  .panel-content-scrollable {
+    margin: 10px 0 0 10px;
+    flex: 1 0 auto;
+    height: 100%;
+    overflow: auto;
+  }
+  .filter-control {
+    margin: 10px 0 0 10px;
+  }
+}