person-status.styl

@import('statuses')

.person-status {
  position: relative;
  font-family: verdana;
  font-size: 12px;
  font-weight: normal;
  
  .indicator.inactive,
  &.inactive > .indicator {
    background-color: inactive
  }

  .indicator.active,
  &.active > .indicator {
    background-color: active;
  }

  .indicator.clean,
  &.clean > .indicator {
    background-color: clean;
  }

  .indicator.complete,
  &.complete > .indicator {
    background-color: complete;
  }

  .indicator.hard,
  &.hard > .indicator {
    background-color: hard;
  }

  .indicator {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 5px;
    margin-right: 5px;
    cursor: pointer;
    border: 1px solid #777;
    pointer-events: all;
  }

  .dropdown {
    position: absolute;
    top: 15px;
    left: 0;
    display: none;
    width: 95px;
    border: 1px solid #aaa;
    border-radius: 5px;
    z-index: 100;
    background-color: white;

    .item {
      padding: 5px;
      cursor: pointer;

      &:hover {
        background-color: #eef;
      }
    }
  }

  &.open .dropdown {
    display: block;
  }
}