pip-webui/pip-webui-composite/src/checklist_edit/checklist_edit.less

HTML5 UI for LOB applications

// @file CSS styles for checklist edit control
// @copyright Digital Living Software Corp. 2014-2016

@checklist-color-item: #fafafa;
@checklist-color-selected-item: #ebebeb;

@checklist-color-divider: #e0e0e0;

.pip-checklist-edit {
  width: 100%;
  background-color:  @checklist-color-item;


  .pip-checklist-item-body {
    border-top: 1px solid @checklist-color-item;
    border-bottom: 1px solid @checklist-color-item;
  }

  .pip-checklist-item-body.select-active-item {
    border-top: 1px solid @checklist-color-divider;
    border-bottom: 1px solid @checklist-color-divider;
  }

  .pip-checklist-item-body {
    display: table;
    font: @font-subhead1;
    width: 100%;
    border-left: none;
    border-right: none;

    .pip-checklist-button {
      vertical-align: top;
      display: table-cell;
      width: 48px;
      md-button {
        height: 48px;
      }
    }

    .pip-checklist-button-container {
      height: 48px!important;
      display: inline-block;
    }

    .pip-checklist-text {
      display: table-cell;
      vertical-align: middle;
      padding: 12px 20px 10px 20px;
      line-height: 24px;
    }
  }

  .md-button.pip-icon-checklist-button {
    height: 48px;
    min-width: 0;
    line-height: 24px;
    padding: 12px;
    width: 48px;
    border-radius: 50%;
    margin: 0px;
  }

  .pip-checklist-button.pip-icon-checklist-button {
    .md-ripple-container {
      height: 0px;
      width: 0px;
    }
  }

  .put_place {
    height: 0px;
    transition-property: background, height;
    transition-duration: .2s;
    background-color: rgb(250, 250, 250);
  }

  md-input-container {
    padding: 0px !important;
    margin: 0px !important;
    width: 100%;

    textarea {
      border-bottom: 0px !important;
      padding: 0px!important;
      //height: 25px;
    }
  }

  md-input-container .md-errors-spacer {
      height: 0px !important;
      min-height: 0px;
  }

  md-checkbox {
    margin-left: 14px;
    margin-top: 14px;
    margin-bottom: 0px;
  }

  .pip-checklist-item {
    background-color:  @checklist-color-item;
  }

  .no-ripple-container.md-icon-button {
    .md-ripple-container {
      height: 0px;
      width: 0px;
    }
  }

  .pip-checklist-draggable{

    .pip-checklist-item [pip-drag]{
      background-color:  @checklist-color-selected-item;
      -moz-user-select: -moz-none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    /*тащим*/
    .pip-checklist-item [pip-drag].pip-dragging.pip-drag-over {
      z-index: 2000;
    }

    .pip-checklist-item [pip-drop] {
      transition-property: height;
      transition-duration: .2s;
    }

    &>.pip-drag-enter .put_place
    {
      height: 32px!important; /* todo size of putting block */
      transition-property: background, height;
      transition-duration: .2s;
      background-color: rgb(209, 209, 209);
    }

    &>.pip-dragging .put_place {
      height: 0px!important;
      transition-property: background, height;
      transition-duration: .2s;
      background-color: rgb(0, 0, 0);
    }

  }

  .pip-checklist-item.ng-enter,
  .pip-checklist-item.ng-leave {
    -webkit-transition: 500ms linear all;
    -moz-transition: 500ms linear all;
    -ms-transition: 500ms linear all;
    -o-transition: 500ms linear all;
    transition: 500ms linear all;
  }

  .pip-checklist-item.ng-leave.ng-leave-active,
  .pip-checklist-item.ng-enter {
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    transform: scaleY(0);
    height: 0px;
    opacity: 0;
  }

  .pip-checklist-item.ng-enter.ng-enter-active,
  .pip-checklist-item.ng-leave {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1);
    height: 60px;
    opacity: 1;
  }

}