* p
margin-top: 10px
+.footer
+ font-size: 13px
+
color_crayon = #8c8c8c
color_selected = #544c4c
color_hover = #777
color_controls = #000
color_controls_hover = #222
color_controls_selected = #444
+color_controls_dragging = #666
.crayon_mockup
svg
- path.polyline
+ .polyline
fill: none
stroke-width: 5
stroke-linecap: butt
stroke-opacity: 1
stroke-dasharray: none
// fails in firefox (must be inline) filter: url(#crayon)
- rect
- fill: none
- rect.canvas_border
+ .canvas_border
overflow: hidden
+ fill: none
stroke: #ccc
stroke-width: 2
stroke-linecap: butt
stroke-dasharray:2 4
stroke-dashoffset:1
//stroke-opacity:1;marker:none;enable-background:accumulate
- rect.box
+ .box
stroke: color_crayon
+ fill: none
stroke-width: 4
stroke-linecap: butt
stroke-linejoin:miter
// this doesn't work in firefox: filter: url(#crayon)
- rect.box, path.polyline
+ .box, .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
+ .box.selected, .polyline.selected
stroke: color_selected
- circle.control_point
+ .box.dragging, .polyline.dragging
+ stroke: color_dragging
+ .box.normal.hover, .polyline.normal.hover
+ stroke: color_hover
+ .control_point
stroke: none
fill: color_controls
- circle.control_point.hover
- fill: color_controls_hover
- circle.control_point.selected
+ .control_point.selected
fill: color_controls_selected
+ .control_point.dragging
+ fill: color_controls_dragging
+ .control_point.normal.hover
+ fill: color_controls_hover