improve selection handling, hover

[crayon_mockup.git] / styl.styl

diff --git a/styl.styl b/styl.styl
index c5b6d5c..ae2bdc4 100644 (file)
--- a/styl.styl
+++ b/styl.styl
@@ -1,35 +1,53 @@
+body
+       margin: 0px
+       padding: 10px
+       font: 15 Arimo, Arial, sans-serif
+h1
+       font-size: 28px
+       margin: 0
+p
+       margin: 0
+* p
+       margin-top: 10px
+
+color_crayon = #8c8c8c
+color_selected = #544c4c
+color_hover = #777
+color_dragging = #9e9373
+color_controls = #000
 .crayon_mockup
        svg
-               border: 1px dotted #aaa
-               /.crayon_mockup.delete_tool svg
-                       cursor: crosshair
-       svg path
-               fill: none
-               stroke: #8c8c8c
-               stroke-width: 3
-               stroke-linecap: butt
-               stroke-linejoin: round
-               stroke-miterlimit: 4
-               stroke-opacity: 1
-               stroke-dasharray: none
-               /.crayon_mockup.delete_tool svg path:hover
+               path.polyline
+                       fill: none
                        stroke-width: 5
-                       stroke: #f00
-       .button
-               display: inline-block
-               border-radius: 4px
-               background: white
-               box-shadow: 1px 1px 4px rgba(0,0,0,0.5)
-               padding: 1px 2px
-               cursor: pointer
-               &:hover
-                       background-color: #f9f9f9
-               margin: 0 4px
-               * + &
-                       margin-left: 8px
-       .button.disabled
-               color: #777
-               background-color: #f3f3f3
-               cursor: default
-       .toolbar, .tool_options
-               padding-bottom: 5px
+                       stroke-linecap: butt
+                       stroke-linejoin: round
+                       stroke-miterlimit: 4
+                       stroke-opacity: 1
+                       stroke-dasharray: none
+                       // 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
+                       //stroke-opacity:1;marker:none;enable-background:accumulate
+               rect.box
+                       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