src/assets/styles/_arrangement.less
// ARRANGEMENT
// styles for the layering of the elements
// Vars
// these are intended for use with `z-index`
// so will ultimately be applied within the respective stacking context.
// Content Layout
// Variables are not defined, but should all be below 100
// NOTE -- If you're having to use these, double check your thinking around layout.
// Using these is a sniff test.
// Shared view positoning
.standard-view-padding {
padding: 0 1.25rem;
}
// Behind
@default-behind: -1;
// Base Container Index
@default-z-index: 1;
// Above Content
@above-all-content: 10;
@above-all-content-above: 11;
@above-all-content-top-layer: 12;
// View Chrome
// TODO -- Need to refactor z-index utilization with this
@mask: 20;
@mask-above: 30;
// Modal
@mask-modal: 100;
//top bar height
@top-bar-height: 4.5rem;
@top-bar-height-mobile: 50px;
// inner banner height
@inner-banner-height: 75px;
@inner-banner-height-mobile: 50px;
@inner-banner-height-mobile-small: 85px;
// global banner height
@global-banner-height: 42px;
@global-banner-height-mobile: 65px;
@global-banner-height-mobile-small: 75px;