+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: 2
- 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