badges.css.scss

.badges {
  li {
    width:         32px;
    height:        32px;
    text-align:    center;
    line-height:   34px;
    font-size:     12px;
    background:    black;
    border-radius: 50%;
    border:        2px solid #333;

    -webkit-transition: background 1s;
    -moz-transition:    background 1s;
    -o-transition:      background 1s;
    -ms-transition:     background 1s;
    transition:         background 1s;

    // -webkit-transition: opacity 0.8s;
    // -moz-transition:    opacity 0.8s;
    // -o-transition:      opacity 0.8s;
    // -ms-transition:     opacity 0.8s;
    // transition:         opacity 0.8s;

    span {
      color:           #fff;
      display:         block;
      text-decoration: none;
      width:           24px;
      height:          24px;
      background:      #333;
      border-radius:   50%;
      margin:          4px;
      line-height:     24px;

      -webkit-transition: -webkit-transform 0.8s ease-in;
      -moz-transition:    -moz-transform    0.8s ease-in;
      -o-transition:      -o-transform      0.8s ease-in;
      -ms-transition:     -ms-transform     0.8s ease-in;
      transition:         transform         0.8s ease-in;
    }

    span.animated {
      -webkit-transform: rotate(720deg);
      -moz-transform:    rotate(720deg);
      -o-transform:      rotate(720deg);
      -ms-transform:     rotate(720deg);
      transform:         rotate(720deg);
    }
  }

  li.faded {
    opacity: 0.3;
  }

  [color=blue] {
    background-color: #67aaff;
    color:            #67aaff;

    .spot {
      color: #67aaff;
    }
  }

  [color=green] {
    background-color: #b8ff65;
    color:            #b8ff65;

    .spot {
      color: #b8ff65;
    }
  }

  [color=orange] {
    background-color: #ffb459;
    color:            #ffb459;

    .spot {
      color: #ffb459;
    }
  }

  [color=purple] {
    background-color: #dc73ff;
    color:            #dc73ff;

    .spot {
      color: #dc73ff;
    }
  }

  [color=yellow] {
    background-color: #f9ff7c;
    color:            #f9ff7c;

    .spot {
      color: #f9ff7c;
    }
  }

  [color=nobody] {
    background-color: #b3b3b3;
    color:            #b3b3b3;
  }
}

#map {
  #badges {
    position: repeat;

    li {
      position: absolute;
    }
  }
}

<% Territory.all.each do |territory| %>
#badge_<%= territory.id %> {
  top:  <%= territory.badge_offset_y - 34/2 %>px;
  left: <%= territory.badge_offset_x - 34/2 %>px;
}
<% end %>