style.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 = #777
  16 color_dragging = #9e9373
  17 color_controls = #000
  18 color_controls_hover = #222
  19 color_controls_selected = #444
  20 .crayon_mockup
  21         svg
  22                 path.polyline
  23                         fill: none
  24                         stroke-width: 5
  25                         stroke-linecap: butt
  26                         stroke-linejoin: round
  27                         stroke-miterlimit: 4
  28                         stroke-opacity: 1
  29                         stroke-dasharray: none
  30                         // fails in firefox (must be inline) filter: url(#crayon)
  31                 rect
  32                         fill: none
  33                 rect.canvas_border
  34                         overflow: hidden
  35                         stroke: #ccc
  36                         stroke-width: 2
  37                         stroke-linecap: butt
  38                         stroke-linejoin:miter
  39                         stroke-dasharray:2 4
  40                         stroke-dashoffset:1
  41                         //stroke-opacity:1;marker:none;enable-background:accumulate
  42                 rect.box
  43                         stroke: color_crayon
  44                         stroke-width: 4
  45                         stroke-linecap: butt
  46                         stroke-linejoin:miter
  47                         // this doesn't work in firefox: filter: url(#crayon)
  48                 rect.box, path.polyline
  49                         stroke: color_crayon
  50                 rect.box.hover, path.polyline.hover
  51                         stroke: color_hover
  52                 rect.box.dragging, path.polyline.dragging
  53                         stroke: color_dragging
  54                 rect.box.selected, path.polyline.selected
  55                         stroke: color_selected
  56                 circle.control_point
  57                         stroke: none
  58                         fill: color_controls
  59                 circle.control_point.hover
  60                         fill: color_controls_hover
  61                 circle.control_point.selected
  62                         fill: color_controls_selected