btn.haml

!!! XML

%svg{'xmlns'    => 'http://www.w3.org/2000/svg',
  'xmlns:xlink' => 'http://www.w3.org/1999/xlink',
  'width'       => '80',
  'height'      => '20'}
  %linearGradient{'id' => 'a', 'x2' => 0, 'y2' => '100%'}
    - case opts[:style]
      - when 'default'
        %stop{'offset' => '0',
              'stop-color' => "##{opts[:color]}",
              'stop-opacity' => '.7'}
        %stop{'offset' => '.1',
              'stop-color' => '#aaa',
              'stop-opacity' => '.1'}
        %stop{'offset' => '1',
              'stop-opacity' => '.5'}
      - when 'flat'
        %stop{'offset' => 0,
              'stop-color' => "##{opts[:color]}",
              'stop-opacity' => '.1'}
        %stop{'offset' => 1,
              'stop-opacity' => '.1'}
      - when 'flat-square'
        %stop{'offset' => 0,
              'stop-color' => "##{opts[:color]}",
              'stop-opacity' => '.1'}
        %stop{'offset' => 1,
              'stop-opacity' => '.1'}
      - else
        -# Match default styling.
        %stop{'offset' => '0',
              'stop-color' => "##{opts[:color]}",
              'stop-opacity' => '.7'}
        %stop{'offset' => '.1',
              'stop-color' => '#aaa',
              'stop-opacity' => '.1'}
        %stop{'offset' => '1',
              'stop-opacity' => '.5'}
  - case opts[:style]
    - when 'flat-square'
      %rect{'width' => '80',
            'height' => '20',
            'fill' => '#555'}
    - else
      %rect{'rx' => '3',
            'width' => '80',
            'height' => '20',
            'fill' => '#555'}
  - case opts[:style]
    - when 'flat-square'
      %rect{'x' => '37',
            'width' => '43',
            'height' => '20',
            'fill' => "##{opts[:bg_color]}"}
    - else
      %rect{'rx' => '3',
            'x' => '37',
            'width' => '43',
            'height' => '20',
            'fill' => "##{opts[:bg_color]}"}

  %path{'fill' => "##{opts[:bg_color]}",
        'd' => 'M37 0h4v20h-4z'}
  - case opts[:style]
    - when 'flat-square'
      %rect{'width'  => '80',
            'height' => '20',
            'fill'   => 'url(#a)'}
    - else
      %rect{'rx'     => '3',
            'width'  => '80',
            'height' => '20',
            'fill'   => 'url(#a)'}

  %g{'fill' => "##{opts[:color]}",
     'text-anchor' => 'middle',
     'font-family' => 'DejaVu Sans,Verdana,Geneva,sans-serif',
     'font-size'   => '11'}
    %a#link{'xlink:href' => "#{opts[:button_url]}",
            'target' => '_new'}
      -# Shadow
      %text{'x' => '19.5',
            'y' => '15',
            'fill-opacity' => '.3',
            'fill' => '#010101'}= opts[:button_text]
      -# Actual button text
      %text{'x' => '19.5',
            'y' => '14',
            'fill' => "##{opts[:color]}"}= opts[:button_text]
    %a#count-link{'xlink:href' => "#{opts[:count_url]}",
                  'target' => '_new'}
      -# Shadow
      %text#count{'x' => '57.5',
            'y' => '15',
            'fill-opacity' => '.3',
            'fill' => '#010101'}= opts[:count]
      -# Actual count text
      %text#count{'x' => '57.5',
            'y' => '14',
            'fill' => "##{opts[:color]}"}= opts[:count]