switch to dragging interface

[crayon_mockup.git] / styl.styl

diff --git a/styl.styl b/styl.styl
index 1f6fd72..bccabd4 100644 (file)
--- a/styl.styl
+++ b/styl.styl
@@ -1,30 +1,42 @@
+body
+       margin: 0px
+       padding: 10px
+       font: 15 Arimo, Arial, sans-serif
+h1
+       font-size: 28px
+       margin: 0
+p
+       margin: 0
+* p
+       margin-top: 10px
+               
 .crayon_mockup
+       
        svg
-               border: 1px dotted #aaa
-       svg path
-               fill: none
-               stroke: #8c8c8c
-               stroke-width: 2
-               stroke-linecap: butt
-               stroke-linejoin: round
-               stroke-miterlimit: 4
-               stroke-opacity: 1
-               stroke-dasharray: none
-       .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
+               path
+                       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)
+               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: #8c8c8c;
+                       stroke-width: 4;
+                       stroke-linecap: butt;
+                       stroke-linejoin:miter;
+                       filter: url(#crayon);