sogo/UI/WebServerResources/scss/views/_view.scss

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

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

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

body.popup {
  .viewer {
    width: 100%;
  }
  .view-detail {
    max-width: 100%;
  }
  @include from(md) {
    [class|="view"] {
      position: static;
    }
  }
}

// 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, 6, 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;
  overflow: hidden;
  @include at(md) {
    @include flex-col(md, 10);
    margin: 0;
  }
  @include from(lg) {
    @include flex-col(lg, 10, 2, 1);
    margin: 0;
  }

  // No animation on medium to large screens
  @include from(md) {
    .md-static {
      position: static;
    }
    .viewer {
      position: absolute;
      top: $toolbar-height;
      left: 0;
      right: 0;
      bottom: 0;
      max-width: 100%;
      overflow-y: auto;
//      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%);
//        }
//      }
    }
  }

  // On small screens, the view slides from the right and takes all screen place.
  // Expected Display Steps:
  //  1. The class sg-close is used when there's no selection
  //  2. An list item is selected (ui-router state changes):
  //   a. sg-close is removed from view-detail
  //   b. view-detail (transparent) slides over view-list
  //   c. viewer is inserted into the DOM and slides inside view-detail
  //  3. An list item is closed (ui-router state changes):
  //   a. viewer slides out of view-detail and is removed from the DOM
  //   b. view-detail (transparent) slides outside view-list
  //   c. sg-close is added to view-detail
  @include to(sm) {
    display: block;
    background-color: transparent !important;
    position: absolute;
    //top: $toolbar-tall-height;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: ($z-index-toolbar + 1);
    transform: translateX(0);
    transition: $swift-ease-in-out;
    &.sg-close {
      transform: translateX(100%);
    }
    &.ng-leave.ng-leave-active {
      transform: translateX(100%);
    }
    &.ng-enter {
      transform: translateX(100%);
      &.ng-enter-active {
        transform: translateX(0);
      }
    }
    .viewer {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      overflow-x: hidden;
    }
  }
}