/// _view.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-

@import 'LoginUI.scss';
@import 'MailerUI.scss';
@import 'ContactsUI.scss';
@import 'MessageEditorUI';
@import 'SchedulerUI';

.view[layout=row],
.view.layout-row {
  max-height: 100%;
}

// We make intensive use of the list/detail view pattern, here are some base
// definitions for this
// ----------------------------------------------------------------------------

// Variables
$listView-width: grid-step(6) !global;
$detailView-width: grid-step(8) !global;

//[id="messagesList"] {
//  flex: 0 0 $listView-width;
//
//}
//
//[id ="contactsList"] {
//  flex: 0 1 $listView-width;
//  min-width: ($listView-width - ($pitch * 2));
//}

[class|="view"] {
  position: relative;

}

.view-list {
  z-index: ($z-index-view - 1);
  min-width: ($listView-width - ($pitch * 2));
  @include at(md){
    @include flex-col(md, 7, 1, 1);
    min-width: ($pitch * 3);
  }
  @include from(lg) {
    @include flex-col(lg, 6, 1, 0);
  }
  @include to(sm) {
    width: 100%;
    min-width: 100%;
  }
}

.view-detail {
  z-index: $z-index-view;
  overflow-x: hidden;
  background-color: transparent;
  @include at(md) {
    @include flex-col(md, 9);
    margin: 0;

  }
  @include from(lg) {
    @include flex-col(lg, 10, 2, 1);
    margin: 0;

  }
  @include from(md) {
    .viewer {
      position: absolute;
      left: 0;
      right: 0;
      max-width: 100%;
      transform: translate3d(0, 0, 0);
      transition: all 0.5s $swift-ease-in-out-timing-function;
      &.ng-enter {
        transform: translate(-105%, 0);
        &.ng-enter-active {
          transform: translate(0%, 0%);
          transition-delay: 0.5s;
        }
      }

      &.ng-leave {
        transition-delay: 0;
        transition-duration: 0.1s;
        transform: translate(0, 0);

        &.ng-leave-active {
          transition-delay: 0.1s;
          transition-duration: 0.4s;
          transform: translate(-105%, 100%);

        }
      }
    }
  }

  @include to(sm) {
    position: absolute;
    width: 100%;
    min-width: 100%;
    // caution: limited support in Android (<=4.4), full-support in v. 37
    height: calc(100vh - #{$toolbar-tall-height});
    transform: translateX(-100%) scale(1);
    transform-origin: 50% 50%;
    transition: all 0.5s $swift-ease-in-out-timing-function;
// .view-detail.sg-close hides the background
    &.sg-close {
      transition-delay: 0.1s;
      transition-duration: 0.4s;
      transform: translateX(-100%) scale(0);
      // .viewer is the card itself
      .viewer {
        &.ng-leave,
        &.ng-enter,
        &.ng-leave.ng-leave-active {
          transform: translateY(0) scale(0);
        }
        // ui-sref might add ng-animate class early
        &.ng-enter.ng-enter-active {
          transform: translateY(0) scale(0);
        }
      }
    }
    // .viewer is the card itself
    .viewer {
      &.ng-leave,
      &.ng-leave.ng-leave-active {
        transform: translateY(100%) scale(0);
      }

      &.ng-enter {
        transition: all 0.5s $swift-ease-in-out-timing-function;
        transform: translateY(100%) scale(0);
      }
      &.ng-enter.ng-enter-active {
        transform: translateY(0) scale(1);
      }
    }

    &.ng-leave,
    &.ng-leave.ng-leave-active {
      transform: translateX(-100%) scale(0);
    }

    &.ng-enter {
      transition: all 0.5s $swift-ease-in-out-timing-function;
      transform: translateX(-100%) scale(0);
    }
    &.ng-enter.ng-enter-active {
      transform: translateX(-100%) scale(1);
    }
  }
}