JordanHatch/maslow-redux

.the-need {
  @include header-panel;

  em {
    font-style: normal;
  }

  overflow: auto;

  h1 { float: left; max-width: 80%; }

  .actions { float: right; }
}

.need-overview {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 20px 5px;

  .column {
    flex: 1;
    min-width: 40rem;
  }
}

section.box {
  @include box;

  .empty {
    padding: 15px;
    margin: 0;
  }
}

.box-follows .teams-list {
  ul {
    padding-left: 15px;
  }
}

.box-met-when, .box-proposition {
  ul {
    padding: 15px 25px 5px 35px;
    margin-bottom: 0;
  }
  li {
    font-size: 17px;
    line-height: 1.23em;
    margin-bottom: 11px;
  }
}
.box-proposition h2 {
  margin: 0 0 3px;
  font-size: 17px;
}

.box-tags {
  .tags-list {
    padding: 5px 15px;
  }
  .tags-list > li {
    list-style: none;
    margin: 10px 0;
    padding: 0;
    line-height: 1.3;

    ul, h3 {
      display: inline-block;
      font-size: 15px;
    }

    h3 {
      display: block;
      margin: 0 0 7px;
      font-weight: bold;
    }

    ul {
      padding-left: 0px;

      li {
        display: inline-block;
        padding: 3px 6px;
        margin: 0 3px 4px 0;

        background: $primary-color;
        color: #fff;

        font-weight: bold;

        a {
          color: #fff;
        }
      }
    }
  }
}

.box-responses {
  ul.response-summary {
    padding: .5rem;
    margin-bottom: 0;
    font-size: 1.6rem;

    li {
      list-style: none;
    }

    a {
      display: block;
      padding: .75rem 1rem 1rem;
      text-decoration: none;
      border-radius: 4px;

      &:hover {
        background-color: $grey-4;
      }

      span {
        vertical-align: middle;
      }

      .detail {
        text-decoration: underline;
      }
    }

    .icon {
      @extend .glyphicon;
      padding-right: .7rem;
      font-size: 1.5rem;
      color: $primary-shadow-color;
    }

    .response-type-content .icon {
      @extend .glyphicon-book;
    }
    .response-type-service .icon {
      @extend .glyphicon-list-alt;
    }
    .response-type-other .icon {
      @extend .glyphicon-bullhorn;
    }
  }
}

.box-actions {
  p {
    padding: 10px 15px 5px;
  }
}