pip-webui/pip-webui-css/src/components/ref_item.less

HTML5 UI for LOB applications

// @file Reference Item CSS styles
// @copyright Digital Living Software Corp. 2014-2015

// Implement the following structure (something close to)
// pip-ref-item
//   pip-pic
//   pip-content
//     pip-title
//     pip-subtitle

.pip-ref-item {

  @ref-item-pic-size: 40px;
  @ref-item-pic-size-sm: 30px;
  @ref-item-pic-radius: 50%;

  .flex();
  .flex-direction-row();
  .flex-vertical-center();
  .flex-horizontal-start();

  height: 72px;

  img {
    &.pip-pic, &.pip-pic-sm {
      border-radius: 50%;
    }
  }

  .pip-pic {
    margin-right: 16px;
    height: @ref-item-pic-size;
    width: @ref-item-pic-size;
  }

  .pip-pic-sm {
    margin: 3px 26px 3px 0;

    height: @ref-item-pic-size-sm;
    width: @ref-item-pic-size-sm;
  }

  .pip-content {
    .text-overflow();

    line-height: initial !important;

    .pip-title,
    .pip-subtitle {
      margin: 0;
      .text-overflow();
    }

    .pip-title {
      -webkit-user-select: auto;
      font: @font-subhead2;
      margin-top: 1px !important;
      margin-bottom: 4px !important;
    }

    .pip-subtitle {
      font: @font-body1;
      color: @color-secondary;
    }

    .pip-icon {
      width: 15px;
      height: 15px;
      vertical-align: middle;
      margin-top: -1px;
    }
  }
}

.pip-ref-item::before {
    .md-list-item-inner {
      content: none;
    }
    .md-list-item-inner::before {
      content: none;
    }    
}