Leitgedanken/msd2/myoos/admin/less/the-phoenix/layout.less

/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/

html {
  /* @replace rtl */ direction: ltr;
  height: 100%;
  // http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
  -ms-touch-action: manipulation;
    touch-action: manipulation;
}

html, body {
  // overflow-x: hidden;
  height: 100%;
}

// Main wrapper
// -----------------------------
.wrapper {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  &.ng-leave {
    display: none;
  }

  // Contains the main sidebar
  > .aside {
    // visibility: hidden;
    position: absolute;
    width: @aside-wd;
    
    top: 0; left: 0;
    bottom: 0;
    z-index: @z-index-main-section + 5;
	backface-visibility: hidden;
    background-color: @aside-bg;

    .aside-inner {
      padding-top: @navbar-hg * 2;
      height: 100%;
      width: @aside-wd;
      overflow: hidden;
    }

    > .nav-floating {

      // position: handled from directive
      left: inherit;
      margin-left: @aside-wd;
      z-index: @z-index-main-section * 10;

      min-width: 190px;
      overflow: auto;
    }
  }

  .dropdown-backdrop {
    z-index: @z-index-main-section - 2;
  }
  // Contains the main content
  > section {
    position: relative;
    height: 100%;
    margin-left: 0;
    // overflow: hidden;
    z-index: @z-index-main-section;
    background-color: @content-bg;
    margin-bottom: @footer-hg !important; // ensure a space for the footer
  }

  // Page Footer
  > footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: @footer-hg;
    border-top: 1px solid @gray-light;
    padding: @content-padding;
    z-index: @z-index-main-section - 2;
    > p {
      margin: 0;
    }
  }
}
.modal-open .wrapper {
  z-index: 0;
}

// Page main content
// -----------------------------
.content-wrapper {  
  padding-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
  // styling to visually wrap the component
  border-top: 1px solid rgba(0,0,0,.15);
  margin-top: -1px;


  > button, > .btn {
    margin: 10px 10px 0 0;
  }
  
  .container,
  .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }

}

.page-heading {
    border-top-style: none;
    border-top-width: 0;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-top: 0;
    margin-bottom: 20px;
}

// Desktop layout
// -----------------------------

@media @tablet {

  body {
    min-height: 100%;
  }

  .wrapper {
    
    > .aside {
      .aside-inner {
        padding-top: @navbar-hg;
      }
    }

    > section,
    > footer {
      margin-left: @aside-wd;
    }

  }

}

// Aside toggled layout
// On mobile acts like offcanvas
// -----------------------------

@media @upto-tablet {
  .wrapper {
    > .aside {
      margin-left: -@aside-wd;
    }
  }
  .aside-toggled {
    .wrapper {
      > section,
      > footer {
        margin-left: @aside-wd;
      }
      
      > .aside {
        margin-left: 0;
      }
    }
  }

  
}

// Toggle and collapsed behavior overrides

@media @upto-tablet {
  
  .aside-collapsed .wrapper {
    > .aside {
      margin-left: -@aside-wd-collapsed;
    }
  }

  .aside-collapsed.aside-toggled {
    .wrapper {
      > section,
      > footer {
        margin-left: @aside-wd-collapsed;
      }
      
      > .aside {
        margin-left: 0;
      }
    }
  }
  
}

// Aside collapsed layout
// -------------------------------

// Aside status toggled via JS
.aside-collapsed {
  overflow-y: auto;
  .wrapper {
    > .aside {
      &, > .aside-inner {
        width: @aside-wd-collapsed;
      }
      > .nav-floating {
        margin-left: @aside-wd-collapsed;
      }
    }
  }
}

// Margin only exists above tablet
@media @tablet {
  // Aside status toggled via JS
  .aside-collapsed {
    .wrapper {
      > section,
      > footer {
        margin-left: @aside-wd-collapsed;
      }
    }
  }
}

// mixin to remove transformations
.disable-transform () {
   -webkit-transform: none;
   -moz-transform: none;
   -opera-transform: none;
   -ms-transform: none;
   transform: none;  
}

// Fixed layout
// -----------------------------
.layout-fixed {

  @media (max-width: @boxed-max-width) {
    &.aside-toggled {
      overflow-y: hidden;
    }
  }

  .wrapper {
    .topnavbar-wrapper {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: @z-index-main-section + 10;
    }
    > aside {
      position: fixed;
    }
    /* only applied to sidebar */
    > .aside {
      /* safari fix */
      height: 1px; 
      min-height: 100%;  
      /* ios blanks space fix */ 
      > .aside-inner {   
        position: fixed;
        top: 0;
        bottom: 0;
      }
    }
    > section {
      margin-top: (@navbar-hg + 2) * 2;
      @media @tablet {
        margin-top: @navbar-hg;
      }
    }
  }
}

/* IE10+ hack: safari fix breaks ie so we need to target ie only to restore */
_:-ms-lang(x), .layout-fixed .wrapper > .aside > .aside-inner {
  position: static !important;
}

// Boxed layout (only for desktops)
// -----------------------------

.layout-boxed {

  @media @desktop {
    overflow: auto !important;
    .wrapper {
      margin: 0 auto;
      overflow: hidden;
      box-shadow: 0 0 13px rgba(0,0,0,.25);

      > .aside {
        left: inherit;
      }
      &, & .topnavbar-wrapper {
        width: 970px;
      }
    }

    &.layout-fixed {
      .wrapper > .aside > .aside-inner {
        left: inherit;
      }
    }
  }
  // max size for large devices
  @media @desktop-lg {
    .wrapper {
      &, & .topnavbar-wrapper {
        width: @boxed-max-width;
      }
    }
  }  

} // boxed