pip-webui/pip-webui-layouts/src/split/split.less

HTML5 UI for LOB applications

// @file CSS styles for split layout
// @copyright Digital Living Software Corp. 2014-2015

.pip-split {
  -webkit-backface-visibility: hidden;
  .pip-split-right {
      border-left: solid 1px @color-divider;
      position: absolute;
      left: 50%;
      height: 100%;
    @media (max-width: 768px) {
      display: none;
    }
  }
}

.pip-split-left {
  width: 549px;
  min-width: ~"calc(50% - 1px)" ;
}

.pip-split-right {
  width: 549px;
  min-width: 50%;
}

.pip-split-left, .pip-split-right {
  background: #FaFaFa;
  max-height: 100% !important;
  position: relative;
  display: flex;

  md-list {
    padding-top: 0;
    padding-bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
  }

  @media (max-width: 1200px) {
    width: 50% !important;
  }

  @media (max-width: 768px) {
    width: 100% !important;
    min-width: 100%;
  }
}

.pip-menu-container {
  overflow: hidden;
}

.pip-split {
  md-toolbar.pip-nav.pip-visible {
    min-height: 48px !important;
    height: 48px;

    md-tab-item {
      span {
        opacity: 1;
      }
    }

    md-tabs {
      min-height: 48px !important;
      height: 48px;
    }
  }

  md-toolbar.pip-nav {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all .5s ease;
    min-height: 0px !important;
    height: 0px !important;
    md-tab-item {
      span {
        -webkit-transition: all .35s ease;
        -moz-transition: all .35s ease;
        -o-transition: all .35s ease;
        transition: all .35s ease;
        opacity: 0;
      }
    }
    md-tabs {
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all .5s ease;
      height: 0px;
      min-height: 0px;
    }
  }

  .pip-date-range-row {
    -webkit-transition: height 0.5s ease;
    -moz-transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    transition: height .5s ease;
    height: 0px !important;
    min-height: 0px !important;
    &.pip-visible {

      min-height: 48px !important;
    }
    span, span::after {
      opacity: 0;
    }
    button {
      span, span::before {
        //opacity: 0 !important;  why ???
      }
    }
  }

  .pip-date-range-row.pip-visible {
    min-height: 0px;
    height: 48px !important;
    span, span::after {
      -webkit-transition: all .35s ease;
      -moz-transition: all .35s ease;
      -o-transition: all .35s ease;
      transition: all .35s ease;
      opacity: 1;
    }
    button {
      span, span::before {
        -webkit-transition: all .35s ease;
        -moz-transition: all .35s ease;
        -o-transition: all .35s ease;
        transition: all .35s ease;
        opacity: 0.54;
      }
    }
  }
}

// new styles

.pip-transition-forward [ui-view].ng-enter, .pip-transition-forward [ui-view].ng-leave,
.pip-transition-back [ui-view].ng-enter, .pip-transition-back [ui-view].ng-leave {
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  -o-transition: all .35s ease;
  transition: all .35s ease;
  -webkit-backface-visibility: hidden;
}

//

.pip-split-small .pip-split-right {
  display: none !important;
}

.pip-split-small.pip-transition-forward [ui-view].ng-enter.split-container {
  z-index: 2200;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

.pip-split-small.pip-transition-forward [ui-view].ng-enter-active.split-container {
  z-index: 2200;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.pip-split-small.pip-transition-back [ui-view].ng-enter.split-container {
  z-index: 2200;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.pip-split-small.pip-transition-back [ui-view].ng-enter-active.split-container {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.pip-split-small.pip-transition-back [ui-view].ng-leave.split-container {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.pip-split-small.pip-transition-back [ui-view].ng-leave-active.split-container {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

//

.pip-transition-forward [ui-view].ng-leave.split-container {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.pip-transition-forward [ui-view].ng-leave-active.split-container {
  -webkit-transform: translate3d(-150%, 0, 0);
  transform: translate3d(-150%, 0, 0);
}

.pip-transition-forward [ui-view].ng-enter.split-container {
  z-index: 2200;
  -webkit-transform: translate3d(50%, 0, 0);
  transform: translate3d(50%, 0, 0);
}

.pip-transition-forward [ui-view].ng-enter-active.split-container {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

//

.pip-transition-back [ui-view].ng-leave.split-container {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.pip-transition-back [ui-view].ng-leave-active.split-container {
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}

.pip-transition-back [ui-view].ng-enter.split-container {
  z-index: 2200;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}

.pip-transition-back [ui-view].ng-enter-active.split-container {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}