patternfly
Version:
This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
128 lines (127 loc) • 3.65 kB
text/less
//
// Layouts
// --------------------------------------------------
.layout-pf {
&,
& body {
min-height: 100%
}
&.layout-pf-fixed {
&.transitions .container-pf-nav-pf-vertical {
transition: @flyout-transition-pf;
}
body {
padding-top: @navbar-pf-height; // make space for the navbar
}
.container-pf-nav-pf-vertical {
margin-left: @nav-pf-vertical-width;
&.hidden-icons-pf {
margin-left: @nav-pf-vertical-hidden-icons-width;
}
&.collapsed-nav {
margin-left: 0; // adjust space for the collapsed left nav
}
&.hidden-nav {
margin-left: 0; // remove space as left nav is hidden
}
&.container-pf-nav-pf-vertical-with-secondary {
&.collapsed-nav {
margin-left: @nav-pf-vertical-collapsed-width;
&.hidden-icons-pf {
margin-left: 0;
}
}
&.collapsed-secondary-nav-pf, &.secondary-visible-pf.collapsed-secondary-nav-pf {
margin-left: @nav-pf-vertical-secondary-width;
}
&.secondary-visible-pf {
margin-left: @nav-pf-vertical-width;
&.hidden-icons-pf {
margin-left: @nav-pf-vertical-hidden-icons-width;
}
&.hidden-nav {
margin-left: 0; // remove space as left nav is hidden
}
&.collapsed-nav {
margin-left: @nav-pf-vertical-collapsed-width;
&.hidden-icons-pf {
margin-left: 0;
}
}
@media (min-width: 1200px) {
margin-left: (@nav-pf-vertical-width + @nav-pf-vertical-secondary-width);
&.hidden-icons-pf {
margin-left: (@nav-pf-vertical-hidden-icons-width + @nav-pf-vertical-secondary-width);
}
&.hidden-nav {
margin-left: 0; // remove space as left nav is hidden
}
&.collapsed-secondary-nav-pf {
margin-left: @nav-pf-vertical-secondary-width;
}
&.collapsed-nav {
margin-left: (@nav-pf-vertical-collapsed-width + @nav-pf-vertical-secondary-width);
&.collapsed-secondary-nav-pf {
margin-left: @nav-pf-vertical-secondary-width;
}
&.hidden-icons-pf {
margin-left: 0;
}
}
}
}
&.hidden-nav {
margin-left: 0; // remove space as left nav is hidden
}
}
}
}
&.layout-pf-fixed-with-footer {
body {
padding-bottom: @footer-pf-height;
}
}
}
.layout-pf-alt {
&,
& body {
min-height: 100%
}
&.layout-pf-alt-fixed {
&.layout-pf-alt-fixed-inner-scroll {
&,
& body {
height: 100%;
min-height: 0;
}
.container-pf-alt-nav-pf-vertical-alt {
height: 100%;
overflow: auto;
&.container-cards-pf {
margin-top: 0;
padding-top: (@grid-gutter-width/2);
}
}
}
&.transitions .container-pf-alt-nav-pf-vertical-alt {
transition: @flyout-transition-pf;
}
body {
padding-top: @navbar-pf-alt-height; // make space for the navbar
}
.container-pf-alt-nav-pf-vertical-alt {
margin-left: (@nav-pf-vertical-alt-width);
&.collapsed-nav {
margin-left: (@nav-pf-vertical-alt-collapsed-width); // adjust space for the collapsed left nav
}
&.hidden-nav {
margin-left: 0; // remove space as left nav is hidden
}
}
}
&.layout-pf-alt-fixed-with-footer {
body {
padding-bottom: @footer-pf-alt-height;
}
}
}