styl.styl

   1 body
   2         margin: 0px
   3         padding: 10px
   4         font: 15 Arimo, Arial, sans-serif
   5 h1
   6         font-size: 28px
   7         margin: 0
   8 p
   9         margin: 0
  10 * p
  11         margin-top: 10px
  12
  13 color_crayon = #8c8c8c
  14 color_selected = #544c4c
  15 color_hover = #000
  16 color_dragging = #9e9373
  17 color_controls = #000
  18 .crayon_mockup
  19         svg
  20                 path.polyline
  21                         fill: none
  22                         stroke-width: 5
  23                         stroke-linecap: butt
  24                         stroke-linejoin: round
  25                         stroke-miterlimit: 4
  26                         stroke-opacity: 1
  27                         stroke-dasharray: none
  28                         // fails in firefox (must be inline) filter: url(#crayon)
  29                 rect
  30                         fill: none
  31                 rect.canvas_border
  32                         overflow: hidden
  33                         stroke: #ccc
  34                         stroke-width: 2
  35                         stroke-linecap: butt
  36                         stroke-linejoin:miter
  37                         stroke-dasharray:2 4
  38                         stroke-dashoffset:1
  39                         //stroke-opacity:1;marker:none;enable-background:accumulate
  40                 rect.box
  41                         stroke: color_crayon
  42                         stroke-width: 4
  43                         stroke-linecap: butt
  44                         stroke-linejoin:miter
  45                         // this doesn't work in firefox: filter: url(#crayon)
  46                 rect.box, path.polyline
  47                         stroke: color_crayon
  48                 rect.box.hover, path.polyline.hover
  49                         stroke: color_hover
  50                 rect.box.dragging, path.polyline.dragging
  51                         stroke: color_dragging
  52                 rect.box.selected, path.polyline.selected
  53                         stroke: color_selected