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

HTML5 UI for LOB applications

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

@color-composite-header: #fafafa;
@color-section-header: #f3f3f3;
@color-section-content: #fafafa;

@color-selected-section-content: #ebebeb;
@color-selected-section-header: #dddddd;

@composite-color-divider: #e0e0e0;

.pip-composite-edit {
  background-color:  rgb(250, 250, 250); /* @color-content */
  transition-property: heigth;
  transition-duration: 2s;
  width: 100%;
  margin: 0 auto;
  position: relative;
  border-top: @divider-border;


  .pip-composite-item {
    border-left: none;
    border-right: none;
  }

  .pip-composite-item.selected-content {
    border-left: none;
    border-right: none;
    border-top: 1px solid @composite-color-divider;
    border-bottom: 1px solid @composite-color-divider;
  }

  .h33 {
    height: 33px!important;
  }

  md-input-container {
    font: @font-subhead1;

    textarea {
      border-bottom: 0px !important;
      padding: 0px!important;
    }
    div.md-errors-spacer {
      display: none;
    }
  }


  .md-icon-button-little.md-button.md-icon-button {
    margin: 0 6px;
    height: 33px;
    min-width: 0;
    line-height: 24px;
    padding: 4px;
    width: 33px;
    border-radius: 50%;
    .md-ripple-container {
      height: 33px;
      width: 33px;
    }
  }

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

  .icon-rearrange-btn {
    @media (min-width: 1200px) {
      width: 350px !important;
    }
    @media (min-width: 768px) and (max-width: 1200px){
      width: 350px !important;
    }
    @media (max-width: 768px){
      width: 150px !important;
    }
  }

  .vp20 {
    padding-top: 20px!important;
    padding-bottom: 20px!important;
  }

  .tp20 {
    padding-top: 20px!important;
  }


  .pip-composite-body {
    position: relative!important;
  }

  /* header */
  .pip-composite-header {
    background-color:  @color-composite-header;
    height: 48px;
    p {
      font-family: @font-family;
      font-size: @font-size-caption;
      color: @color-secondary;
    }
  }

  /* block header */
  .pip-section-header {
    background-color: @color-section-header;
    height: 33px;
    justify-content: space-between;

    &.pip-section-header {
      background-color: #f3f3f3 !important;
      &.composite-icon {
        color: rgb(117, 117, 117);
      }
    }

    &.composite-icon {
      color: rgb(189, 189, 189);
    }

  }

  .composite-animate .pip-section-header {
    -webkit-transition-property: background-color;
    -moz-transition-property: background-color;
    -o-transition-property: background-color;
    transition-property: background-color;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
  }


  /* selected item*/
  .selected-content {
    .pip-section-header {
      background-color: @color-selected-section-header!important;

      .composite-icon {
        color: rgb(117, 117, 117);
      }
    }

    .pip-section-content {
      background-color:  @color-selected-section-content!important;
    }

    .pip-checklist-edit {
      background-color: @color-selected-section-content!important;

      .pip-checklist-item-body.select-active-item {
        border-top: 1px solid @color-selected-section-header!important;
        border-bottom: 1px solid @color-selected-section-header!important;
      }

      .pip-checklist-item-body {
        border-top: 1px solid @color-selected-section-content!important;
        border-bottom: 1px solid @color-selected-section-content!important;
      }
      .pip-checklist-item {
        background-color:  @color-selected-section-content!important;
      }
    }
  }

  /* content */
  .composite-animate .pip-section-content {
    background-color: @color-section-content!important;
    -webkit-transition-property: background-color;
    -moz-transition-property: background-color;
    -o-transition-property: background-color;
    transition-property: background-color;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;

  }

  /* drag && drop */

  .drag-active {
    .putt_box {
      height: 0px;
      transition-property: background, height;
      transition-duration: .2s;
      background-color: #ebebeb;
    }

    .pip-composite-item [pip-drag] {
      -moz-user-select: -moz-none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    /* move */
    .pip-composite-item  [pip-drag].pip-dragging.pip-drag-over {
      z-index: 2000;
      opacity: 0.999;
    }

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

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

    &>.pip-dragging
      .putt_box {
        height: 0px !important;
        transition-property: background, height;
        transition-duration: .2s;
    }
  }

  /* .pip-composite-item */

  .composite-animate.ng-enter-stagger,
  .composite-animate.ng-leave-stagger{
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
    -webkit-transition-duration:0s;
    transition-duration:0s;
  }

  .composite-animate.ng-enter,
  .composite-animate.ng-leave {
    -webkit-transition:height, max-height linear .5s;
    transition:height, max-height  linear .5s;
  }

  .composite-animate.ng-leave.ng-leave-active,
  .composite-animate.ng-enter {
    max-height:0;
    overflow: hidden;
  }

  .composite-animate.ng-leave,
  .composite-animate.ng-enter.ng-enter-active {
    max-height:200px;
    overflow: hidden;
  }

  /* animation for picture_edit */
  div.pip-picture-upload.ng-enter,
  div.pip-picture-upload.ng-leave,
  div.pip-picture-upload.ng-move {
    -webkit-transition: width linear .2s;
    -moz-transition: width linear .2s;
    -o-transition: width linear .2s;
    transition: width linear .2s;
  }

  div.pip-picture-upload.ng-enter {
    width: 0px;
  }

  div.pip-picture-upload.ng-enter.ng-enter-active {
    width: 80px;
  }

  div.pip-picture-upload.ng-leave {
    width: 80px;
  }

  div.pip-picture-upload.ng-leave.ng-leave-active {
    width: 0px;
  }

  /* animation for document_edit */
  div.pip-document-upload.ng-enter,
  div.pip-document-upload.ng-leave,
  div.pip-document-upload.ng-move {
    -webkit-transition: width linear .2s;
    -moz-transition: width linear .2s;
    -o-transition: width linear .2s;
    transition: width linear .2s;
  }

  div.pip-document-upload.ng-enter {
    width: 0px;
  }

  div.pip-document-upload.ng-enter.ng-enter-active {
    width: 80px;
  }

  div.pip-document-upload.ng-leave {
    width: 80px;
  }

  div.pip-document-upload.ng-leave.ng-leave-active {
    width: 0px;
  }



    .pip-section-header.ng-enter,
    .pip-section-header.ng-leave {
      //background-color: @color-section-header;
      //-webkit-transition: 350ms linear all;
      //-moz-transition: 350ms linear all;
      //-ms-transition: 350ms linear all;
      //-o-transition: 350ms linear all;
      -webkit-transition: all .35s ease;
      -moz-transition: all .35s ease;
      -o-transition: all .35s ease;
      transition: all .35s ease;
      transition: 350ms linear all;
    }

    .pip-section-header.ng-enter.ng-enter-active,
    .pip-section-header.ng-leave {
      //background-color: @color-section-header;
      //-webkit-transform: scaleY(1);
      //-moz-transform: scaleY(1);
      //-ms-transform: scaleY(1);
      //-o-transform: scaleY(1);
      //transform: scaleY(1);
      -webkit-transition: all .35s ease;
      -moz-transition: all .35s ease;
      -o-transition: all .35s ease;
      transition: all .35s ease;
      height: 33px;
      //opacity: 1;
    }

    .pip-section-header.ng-leave.ng-leave-active,
    .pip-section-header.ng-enter {
      //background-color: @color-section-header;
      //-webkit-transform: scaleY(0);
      //-moz-transform: scaleY(0);
      //-ms-transform: scaleY(0);
      //-o-transform: scaleY(0);
      //transform: scaleY(0);
      -webkit-transition: all .35s ease;
      -moz-transition: all .35s ease;
      -o-transition: all .35s ease;
      transition: all .35s ease;
      height: 0px;
      //opacity: 0;
    }

}