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 color_controls_dragging = #666
  21 .crayon_mockup
  22         svg
  23                 .polyline
  24                         fill: none
  25                         stroke-width: 5
  26                         stroke-linecap: butt
  27                         stroke-linejoin: round
  28                         stroke-miterlimit: 4
  29                         stroke-opacity: 1
  30                         stroke-dasharray: none
  31                         // fails in firefox (must be inline) filter: url(#crayon)
  32                 .canvas_border
  33                         overflow: hidden
  34                         fill: none
  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                 .box
  43                         stroke: color_crayon
  44                         fill: none
  45                         stroke-width: 4
  46                         stroke-linecap: butt
  47                         stroke-linejoin:miter
  48                         // this doesn't work in firefox: filter: url(#crayon)
  49                 .box, .polyline
  50                         stroke: color_crayon
  51                 .box.selected, .polyline.selected
  52                         stroke: color_selected
  53                 .box.dragging, .polyline.dragging
  54                         stroke: color_dragging
  55                 .box.normal.hover, .polyline.normal.hover
  56                         stroke: color_hover
  57                 .control_point
  58                         stroke: none
  59                         fill: color_controls
  60                 .control_point.selected
  61                         fill: color_controls_selected
  62                 .control_point.dragging
  63                         fill: color_controls_dragging
  64                 .control_point.normal.hover
  65                         fill: color_controls_hover