@dialpad/dialtone-css/lib/build/less/components/root-layout.less

Dialpad's design system

//
//  DIALTONE
//  COMPONENTS: Root Layout
//
//  These are the styles for root layout for Dialpad's design system Dialtone.
//  For further documentation of these and other classes,
//  visit https://dialtone.dialpad.com/components/root-layout.html
//
//  TABLE OF CONTENTS
//  • BASE STYLE
//
//  ============================================================================
//  $   BASE STYLE
//  ----------------------------------------------------------------------------
.d-root-layout {
  position: relative;
  display: grid;
  grid-template-areas:
    'header'
    'sidebar'
    'body'
    'footer';
  grid-template-rows: min-content auto 1fr min-content;
  grid-template-columns: 1fr;
  min-height: 100vh;

  &--fixed {
    height: auto;
  }

  &__header {
    grid-area: header;

    &--sticky {
      position: sticky;
      top: 0;
      z-index: var(--zi-navigation);
    }
  }

  &__sidebar {
    grid-area: sidebar;
    height: 100%;
    overflow: hidden auto;
    box-shadow: none;

    &:focus-visible {
      box-shadow: var(--dt-shadow-focus-inset);
    }
  }

  &__content {
    grid-area: body;
    overflow-y: auto;
    box-shadow: none;

    &:focus-visible {
      box-shadow: var(--dt-shadow-focus-inset);
    }
  }

  &__footer {
    grid-area: footer;
  }
}

.d-root-layout__responsive--default {
  grid-template-areas:
    'header header'
    'sidebar body'
    'footer footer';
  grid-template-rows: min-content 1fr min-content;
  grid-template-columns: min-content 1fr;

  &.d-root-layout--inverted {
    grid-template-areas:
      'header header'
      'body sidebar'
      'footer footer';
    grid-template-columns: 1fr min-content;
  }

  &.d-root-layout--fixed{
    height: 100vh;
  }
}

@media (min-width: 480px) {
  .d-root-layout__responsive--sm {
    grid-template-areas:
      'header header'
      'sidebar body'
      'footer footer';
    grid-template-rows: min-content 1fr min-content;
    grid-template-columns: min-content 1fr;

    &.d-root-layout--inverted {
      grid-template-areas:
        'header header'
        'body sidebar'
        'footer footer';
      grid-template-columns: 1fr min-content;
    }

    &.d-root-layout--fixed {
      height: 100vh;
    }
  }
}

@media (min-width: 640px) {
  .d-root-layout__responsive--md {
    grid-template-areas:
      'header header'
      'sidebar body'
      'footer footer';
    grid-template-rows: min-content 1fr min-content;
    grid-template-columns: min-content 1fr;

    &.d-root-layout--inverted {
      grid-template-areas:
        'header header'
        'body sidebar'
        'footer footer';
      grid-template-columns: 1fr min-content;
    }

    &.d-root-layout--fixed {
      height: 100vh;
    }
  }
}

@media (min-width: 980px) {
  .d-root-layout__responsive--lg {
    grid-template-areas:
      'header header'
      'sidebar body'
      'footer footer';
    grid-template-rows: min-content 1fr min-content;
    grid-template-columns: min-content 1fr;

    &.d-root-layout--inverted {
      grid-template-areas:
        'header header'
        'body sidebar'
        'footer footer';
      grid-template-columns: 1fr min-content;
    }

    &.d-root-layout--fixed {
      height: 100vh;
    }
  }
}