it3s/meppit

.relations {
  .relation-metadata {
    display: none;
    margin-top: 10px;
    padding: 10px;
    border-top: solid 1px $soft-grey;

    h3 {
      font-size: 1.1em;
      color: $grey;
      margin-bottom: 10px;
    }
  }

  &.show {
    height: 350px;
    overflow-y: scroll;

    .relation-item-type {
      font-weight: bold;
    }
    .list-item {
      &.small .item { width: 505px; }

      .item-avatar{
        font-size: 20px;
        width: 22px;
        height: 22px;
        border-radius: 4px;
      }
      .item-title a { color: $meppit-data-color; }

      .metadata-btn {
        font-size: 0.8em;
        padding: 2px 8px;
        float: right;
      }
      .metadata-info {
        display: none;
        padding: 10px 20px;

        .metadata-item {
          margin-bottom: 10px;

          .metadata-key, .metadata-value { display: inline-block; }

          .metadata-key {
            width: 30%;
            color: $grey;
            vertical-align: top;
            font-weight: bold;
          }
          .metadata-value { width: 69% }
        }
      }
    }
  }

  &.edit {
    .list-item {

      .relation_type {
        width: 210px;
      }

      .relation_target_autocomplete {
        display: inline-block;
        width: 238px;
      }
    }

    .relation-metadata {
      .time-field     { width: 150px; }
      .currency-field { width: 50px; }
      .amount-field   { width: 140px; }
    }
  }
}