sogo/UI/WebServerResources/scss/components/sidenav/sidenav.scss

@import "extends";
$sidenav-default-width: (4 * $pitch);
$sidenav-min-space: $pitch;

md-sidenav {
  position: absolute;
  max-width: $sidenav-default-width;
  bottom: 0;
  z-index: $z-index-sidenav;
  background-color: sg-color($sogoPaper, 400);
  overflow: auto;
  flex-direction: column;

  &.md-closed {
    display: none;
  }
  &.md-closed-add,
  &.md-closed-remove {
    display: flex;
    /* this is required as of 1.3x to properly
       apply all styling in a show/hide animation */
    transition: 0s all;
  }

  &.md-closed-add.md-closed-add-active,
  &.md-closed-remove.md-closed-remove-active {
    transition: $swift-ease-out;
  }

  &.md-locked-open-add,
  &.md-locked-open-remove {
    position: static;
    display: flex;
    transform: translate3d(0, 0, 0);
  }
  &.md-locked-open {
    @include from(lg) {
      @include flex-col(lg, 4, 1, 1)
    }

  }

  &.md-locked-open,
  &.md-locked-open.md-closed,
  &.md-locked-open.md-closed.md-sidenav-left,
  &.md-locked-open.md-closed.md-sidenav-right,
  &.md-locked-open-remove.md-closed {
    position: static;
    display: flex;
    transform: translate3d(0, 0, 0);
  }
  &.md-locked-open-remove-active {
    transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
    min-width $swift-ease-in-duration $swift-ease-in-timing-function;
    width: 0;
    min-width: 0;
  }

  &.md-closed.md-locked-open-add {
    width: 0;
    min-width: 0;
    transform: translate3d(0%, 0, 0);
  }

  &.md-closed.md-locked-open-add-active {
    transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
    min-width $swift-ease-in-duration $swift-ease-in-timing-function;
    width: $sidenav-default-width;
    min-width: $sidenav-default-width;
    transform: translate3d(0%, 0, 0);
  }

  @extend .md-sidenav-left;
}
.md-sidenav-backdrop.md-locked-open {
  display: none;
}

.md-sidenav-left {
  left: 0;
  top: 0;
  transform: translate3d(0%, 0, 0);
  &.md-closed {
    transform: translate3d(-100%, 0, 0);
  }
}

.md-sidenav-right {
  left: 100%;
  top: 0;
  transform: translate3d(-100%, 0, 0);
  &.md-closed {
    transform: translate3d(0%, 0, 0);
  }
}

@media (max-width: $sidenav-default-width + $sidenav-min-space) {
  md-sidenav {
    width: 85%;
  }
}

// MAIN SIDENAV, actually to the left
// ----------------------------------------------------------------------------
.md-sidenav-left {
  & md-content,
  & md-toolbar {
    background-color: inherit;
  }
}

// MAILER Folder tree (in the left sidenav
// ---------------------------------------
$i: 1;
@while $i < 12 {
  md-item-content .sg-child-level-#{$i} { padding-left: 2em * $i; }
  $i: $i + 1;
}

// Folder and mailboxes icons
// ---------------------------------------
  [class*="sg-child-level"] {
    margin-right: 1em;
  };
// This hack is so BAD I'm ashame putting it in the shame file
// -----------------------------------------------------------
// Folder tree's controler function are very intricate, the way
// elements are marked as 'active reminds me of good old time JQuery
// There must be a more straigthforward, angular-way to swap classes
// selection, but I don't wan't to mess in that script.
// Here's the hack : on selection I use the parent > child selector to
// change the definition of the icon's class. Yes, this means that
// md-icon-folder:before as the value of md-icon-folder:before:before,
// and this is wrong !

.sg-active i.md-icon-folder:before {
  @extend .md-icon-folder-open:before;
}

.md-sidenav-left {

  md-item-content {
    line-height: $sg-line-height-6; // 40px eg. display-1
    padding: 0 $mg;
    transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
                color 0.5s linear;
    &:hover {
      background-color: sg-color($sogoPaper, 500);
      cursor: pointer;
    }
    &.sg-active {
      color: sg-color($sogoBlue, 800);
    }
    &.sg-loading {
      color: sg-color($sogoBlue, 500);
    }
    .sg-item-name {
      text-align: left;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}