drag offset, proper box proximity, hover

[crayon_mockup.git] / styl.styl

diff --git a/styl.styl b/styl.styl
index ef85724..5d41158 100644 (file)
--- a/styl.styl
+++ b/styl.styl
@@ -9,34 +9,45 @@ p
        margin: 0
 * p
        margin-top: 10px
-               
+
+color_crayon = #8c8c8c
+color_selected = #544c4c
+color_hover = #000
+color_dragging = #9e9373
+color_controls = #000
 .crayon_mockup
-       
        svg
-               path
+               path.polyline
                        fill: none
-                       stroke: #8c8c8c
                        stroke-width: 5
                        stroke-linecap: butt
                        stroke-linejoin: round
                        stroke-miterlimit: 4
                        stroke-opacity: 1
                        stroke-dasharray: none
-                       filter: url(#crayon)
+                       // fails in firefox (must be inline) filter: url(#crayon)
                rect
                        fill: none
                rect.canvas_border
-                       overflow: hidden;
-                       stroke: #ccc;
-                       stroke-width: 2;
-                       stroke-linecap: butt;
-                       stroke-linejoin:miter;
-                       stroke-dasharray:2 4;
-                       stroke-dashoffset:1;
+                       overflow: hidden
+                       stroke: #ccc
+                       stroke-width: 2
+                       stroke-linecap: butt
+                       stroke-linejoin:miter
+                       stroke-dasharray:2 4
+                       stroke-dashoffset:1
                        //stroke-opacity:1;marker:none;enable-background:accumulate
                rect.box
-                       stroke: #8c8c8c;
-                       stroke-width: 4;
-                       stroke-linecap: butt;
-                       stroke-linejoin:miter;
-                       // this doesn't work in firefox: filter: url(#crayon);
+                       stroke: color_crayon
+                       stroke-width: 4
+                       stroke-linecap: butt
+                       stroke-linejoin:miter
+                       // this doesn't work in firefox: filter: url(#crayon)
+               rect.box, path.polyline
+                       stroke: color_crayon
+               rect.box.hover, path.polyline.hover
+                       stroke: color_hover
+               rect.box.dragging, path.polyline.dragging
+                       stroke: color_dragging
+               rect.box.selected, path.polyline.selected
+                       stroke: color_selected