app/assets/stylesheets/angle/app/layout.scss
/* ========================================================================
Component: layout
========================================================================== */
//
// Main layout
// This file controls the presentation of all components
// .wrapper
// > section
// > .content-wrapper
// > .aside
//
// If modified or removed make sure to check the variable
// shared with other components
// -------------------------------------------------------------
$aside-wd: 220px;
$aside-wd-collapsed: 70px;
$aside-bg: #fff;
$content-bg: $body-bg;
$content-heading-bg: #fafbfc;
$content-heading-border: #cfdbe2;
$content-padding: 20px;
$footer-hg: 30px;
$navbar-hg: $navbar-height;
$boxed-max-width: 1140px;
$z-index-main-section: 111;
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;
// @include transition(visibility 0s linear .3s);
@include 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: 15px;
width: 100%;
// styling to visually wrap the component
border-top: 1px solid rgba(0,0,0,.15);
margin-top: -1px;
> .unwrap {
margin: -15px; // expand over wrapper padding
@media only screen and (min-width: $mq-tablet) {
margin: -20px; // expand over wrapper padding
}
}
> h3,
> .content-heading {
font-size: $font-size-h3;
line-height: $headings-line-height;
color: #929292;
margin: -15px;
margin-bottom: 20px;
padding: 15px;
font-weight: normal;
background-color: $content-heading-bg;
border-bottom: 1px solid $content-heading-border;
> small {
display: block;
font-size: 12px;
color: $text-muted;
}
}
> button, > .btn {
margin: 10px 10px 0 0;
}
.container,
.container-fluid {
padding-left: 0;
padding-right: 0;
}
@media only screen and (min-width: $mq-tablet) {
padding: $content-padding;
//overflow: auto; // required for portlets
> h3,
> .content-heading {
margin: -$content-padding;
margin-bottom: $content-padding;
padding: $content-padding;
}
> button, > .btn {
margin: 0;
}
}
}
// Desktop layout
// -----------------------------
@media only screen and (min-width: $mq-tablet) {
body {
min-height: 100%;
}
.wrapper {
> .aside {
.aside-inner {
padding-top: $navbar-hg;
}
}
> section,
> footer {
margin-left: $aside-wd;
}
> section {
// with just a margin we can make the
// right sidebar always visible
&.has-sidebar-right {
margin-right: $aside-wd + 20;
+ .offsidebar {
z-index: 1;
}
}
}
}
}
// Aside toggled layout
// On mobile acts like offcanvas
// -----------------------------
@media only screen and (max-width: $mq-up-to-tablet) {
.wrapper {
> .aside {
margin-left: -$aside-wd;
}
}
.aside-toggled {
.wrapper {
> section,
> footer {
margin-left: $aside-wd;
}
> .aside {
margin-left: 0;
}
}
}
.csstransforms3d {
.wrapper {
@include backface-visibility(hidden);
> section,
> footer {
margin-left: 0;
@include translate3d(0,0,0);
@include transition-transform(.3s ease);
}
> .aside {
margin-left: 0;
@include translate3d(-$aside-wd,0,0);
@include transition-transform(.3s ease);
}
}
.aside-toggled {
.wrapper {
> section,
> footer {
@include translate3d($aside-wd,0,0);
}
> .aside {
@include translate3d(0,0,0);
}
}
}
}
}
// Toggle and collapsed behavior overrides
@media only screen and (max-width: $mq-up-to-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;
}
}
}
.csstransforms3d {
.aside-collapsed .wrapper {
@include backface-visibility(hidden);
> section,
> footer {
margin-left: 0;
@include translate3d(0,0,0);
@include transition-transform(.3s ease);
}
> .aside {
margin-left: 0;
@include translate3d(-$aside-wd-collapsed,0,0);
@include transition-transform(.3s ease);
}
}
.aside-collapsed.aside-toggled {
.wrapper {
> section,
> footer {
@include translate3d($aside-wd-collapsed,0,0);
}
> .aside {
@include translate3d(0,0,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 only screen and (min-width: $mq-tablet) {
// Aside status toggled via JS
.aside-collapsed {
.wrapper {
> section,
> footer {
margin-left: $aside-wd-collapsed;
}
}
}
}
// mixin to remove transformations
@mixin 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,
&.offsidebar-open {
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 only screen and (min-width: $mq-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 only screen and (min-width: $mq-desktop) {
overflow: auto !important;
.wrapper {
margin: 0 auto;
overflow: hidden;
box-shadow: 0 0 13px rgba(0,0,0,.25);
.offsidebar {
position: absolute !important;
}
> .aside {
left: inherit;
}
&, & .topnavbar-wrapper {
width: 970px;
}
}
&.layout-fixed {
.wrapper > .aside > .aside-inner {
left: inherit;
}
}
}
// max size for large devices
@media only screen and (min-width: $mq-desktop-lg) {
.wrapper {
&, & .topnavbar-wrapper {
width: $boxed-max-width;
}
}
}
} // boxed