JordanHatch/maslow-redux

.need-columns {
  display: flex;
  flex-direction: row;
  width: 100%;

  .activity, .need {
    padding: 15px;
  }
  .need-navigation {
    background: $primary-color;
    color: #fff;
    font-size: 15px;
    width: 300px;
    border-right: 5px solid lighten($primary-color, 80%);
  }
  .activity {
    flex: 1;
  }

  h3 {
    font-size: 19px;
  }
}

.need-actions {
  overflow: auto;
  font-size: 13px;

  .left { float: left; }
  .right { float: right; }

  a {
    color: $inverse-text-color;
    padding: 5px 10px;
    border-radius: 4px;
    display: block;
    text-decoration: none;

    &:hover {
      background: $header-border-color;
      color: #fff;
    }
  }

  ul {
    padding: 0;
  }

  li {
    list-style: none;
    float: left;
    margin: 0;

    span {
      @extend .glyphicon;
      padding-right: 4px;
      font-size: 11px;
    }
    &.edit span {
      @extend .glyphicon-pencil;
    }
    &.close-as-duplicate span {
      @extend .glyphicon-ban-circle;
    }
    &.all-needs {
      span {
        @extend .glyphicon-menu-left;
      }
      a {
        border: 1px solid $inverse-text-color;
        &:hover { border-color: $header-border-color; }
      }
    }
  }
}

.closed-need {
  margin: 20px 13px 0px;
  border: 1px solid #eee;
  border-left: 7px solid $alert-color;
  overflow: auto;

  .message {
    padding: 14px;
    background: #fff;
    color: #000;
    float: left;

    h2 {
      margin: 0 0 7px;
      font-size: 23px;
    }
    p {
      margin: 0;
      font-size: 15px;
    }

    a {
      text-decoration: underline;
    }
  }

  .button_to {
    float: right;
    padding: 15px;

    input[type='submit'] {
      @include button-primary;
    }
  }
}

.need-closed-label {
  display: inline-block;
  padding: 0px 5px;
  margin-left: 7px;
  vertical-align: text-bottom;

  background: rgba(0,0,0,0.2);
  font-size: 0.65em;
  text-transform: uppercase;
  color: #fff;
}