_layout.scss

// INITIATE FLEXBOX LAYOUT
// TODO Convert layout to BEM

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: -ms-flexbox;
  display: flex;
}


// TODO move out of layout
.CMSPageEditController, // sass-lint:disable-line class-name-format
.CMSPageSettingsController { // sass-lint:disable-line class-name-format
  &.has-panel {
    @include media-breakpoint-down(md) {
      .cms-content-tools {
        display: none;
      }
    }
  }
}


// Panels, basic holder for CMS content areas
// Use .container-fluid if you want only padding left and right
.panel {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.panel--padded {
  padding: $panel-padding-y $panel-padding-x;
}

// Scrolling panels
.panel--scrollable {
  overflow: auto;
}

// Panel height adjustments for scrolling
.panel--single-toolbar {
  height: calc(100% - #{$toolbar-total-height});
}

.panel--double-toolbar {
  height: calc(100% - #{$toolbar-total-height * 2});
}

.panel--triple-toolbar {
  height: calc(100% - #{$toolbar-total-height * 3});
}



// Component helpers

// Shadows
.z-depth-1 {
  box-shadow: $z-depth-1;
}

.z-depth-2 {
  box-shadow: $z-depth-2;
}

.z-depth-3 {
  box-shadow: $z-depth-3;
}

.z-depth-4 {
  box-shadow: $z-depth-4;
}


// Flex magic
// Nested items take up height
.fill-height {
  height: 100%;
  min-height: 0; // See https://www.fxsitecompat.com/en-GB/docs/2014/initial-value-of-min-width-height-on-flex-items-has-been-reverted-to-auto/
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

// Nested items take up width
.fill-width {
  width: 100%;
  // height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row; // Default
}

// Item to take up available space
.flexbox-area-grow {
  flex: 1 1 0%;
  min-width: 0; // Allows some browsers to shrink below the width of their contents.
}

.cms .flexbox-display {
  display: flex; // Override JQuery UI, useful to override .ui-tabs-panel
}

.vertical-align-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}