///
/// @filename _views.scss
/// @project SOGo
/// @version 3.alpha
/// @module views
///
///
@import 'LoginUI.scss';
@import 'MailerUI.scss';
@import 'ContactsUI.scss';
@import 'MessageEditorUI';
@import 'SchedulerUI';

.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);
  }
  @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;
  background-color: $background-base-color;
  @include from(lg) {
    @include flex-col(lg, 8, 2, 1);
    margin: 0 auto $mg auto;
  }
  @include at(md) {
    @include flex-col(md, 9);
    margin: 0;
  }
  @include to(sm) {
    width: 100%;
    min-width: 100%;
    transform: translateX(-100%) scale(1);
    filter: opacity(1);
    transform-origin: 50% 50%;
    transition: all 0.5s $swift-ease-in-out-timing-function;
    &.sg-close {
      transition: all 0.35s $swift-ease-in-out-timing-function;
      transition-delay: 0.15s;
      transform: translateX(-100%) scale(0);
      //transform: translateX(-200%);
      &.ng-enter {
        transform: translateX(-100%) scale(0);
      }
    }
    &.ng-enter {
      transform: translateX(-100%) scale(0);
      //transform: translateX(0);
    }
    &.ng-enter.ng-enter-active,
    &.ng-leave {
      transform: translateX(-100%) scale(1);
      filter: opacity(1);
      //transform: translateX(-100%);
    }
    &.ng-leave.ng.leave-active {
      transform: translateX(-100%) scale(0);
      filter: opacity(1);
      //transform: translateX(-200%);
    }
    [class *= md-whiteframe-] {
      box-shadow: none;
    }
  }
}