react-toolbox/components/layout/theme.css

@import '../colors.css';
@import '../media.css';
@import '../variables.css';
@import '../app_bar/config.css';
@import '../drawer/config.css';

:root {
  --layout-side-transition: all var(--animation-duration) var(--animation-curve-default);
}

.layout {
  align-items: stretch;
  composes: reset from '../helpers.css';
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  min-width: 100%;
  position: relative;
}

.panel {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;

  &:not(.bodyScroll) {
    height: 100vh;
    max-height: 100vh;
    overflow-y: scroll;
  }
}

.sidebarDrawer,
.navDrawerDrawer {
  z-index: var(--z-index-high);

  &.pinned {
    box-shadow: none;
  }

  &.clipped {
    height: calc(100vh - var(--appbar-height));
    padding-top: calc(0.5 * var(--unit));
    top: var(--appbar-height);

    @media screen and (--xxs-viewport) and (--portrait) {
      height: calc(100vh - var(--appbar-height-m-portrait));
      top: var(--appbar-height-m-portrait);
    }

    @media screen and (--xs-viewport) and (--landscape) {
      height: calc(100vh - var(--appbar-height-m-landscape));
      top: var(--appbar-height-m-landscape);
    }
  }
}

.appbarInner,
.panel {
  transition: var(--layout-side-transition);
}

.appbarFixed {
  &.appbarAppBar {
    z-index: var(--z-index-high);
  }

  & .panel {
    top: var(--appbar-height);

    &:not(.bodyScroll) {
      height: calc(100vh - var(--appbar-height));
      max-height: calc(100vh - var(--appbar-height));
      overflow-y: scroll;
    }

    @media screen and (--xxs-viewport) and (--portrait) {
      top: var(--appbar-height-m-portrait);
    }

    @media screen and (--xs-viewport) and (--landscape) {
      top: var(--appbar-height-m-landscape);
    }
  }
}

.navDrawerPinned {
  & .appbarLeftIcon {
    display: none;
  }

  & .panel {
    left: var(--drawer-mobile-width);
  }

  &:not(.navDrawerClipped) {
    & .appbarAppBar {
      padding-left: calc(var(--drawer-mobile-width) + var(--appbar-h-padding));
    }
  }

  @media screen and (--larger-than-xs-viewport) {
    & .panel {
      left: var(--drawer-desktop-width);
    }

    &:not(.navDrawerClipped) {
      & .appbarAppBar {
        padding-left: calc(var(--drawer-desktop-width) + var(--appbar-h-padding));
      }
    }
  }
}

.navDrawerClipped {
  & .navDrawerWrapper {
    position: relative;
    z-index: var(--z-index-normal);
  }
}

.sidebarPinned {
  & .appbarLeftIcon {
    display: none;
  }

  & .panel {
    right: var(--drawer-mobile-width);
  }

  &:not(.sidebarClipped) {
    & .appbarAppBar {
      padding-right: calc(var(--drawer-mobile-width) + var(--appbar-h-padding));
    }
  }

  @media screen and (--larger-than-xs-viewport) {
    & .panel {
      right: var(--drawer-desktop-width);
    }

    &:not(.sidebarClipped) {
      & .appbarAppBar {
        padding-right: calc(var(--drawer-desktop-width) + var(--appbar-h-padding));
      }
    }
  }
}

.sidebarClipped {
  & .sidebarWrapper {
    position: relative;
    z-index: var(--z-index-normal);
  }
}

@define-mixin sidebarIncrements $platform {
  & .sidebarDrawer {
    width: calc(var(--standard-increment-$(platform)) * $(increment));
  }

  &.sidebarPinned {
    & .panel {
      right: calc(var(--standard-increment-$(platform)) * $(increment));
    }

    &:not(.sidebarClipped) {
      & .appbarAppBar {
        padding-right: calc(var(--standard-increment-$(platform)) * $(increment) + var(--appbar-h-padding));
      }
    }
  }
}

@each $increment in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
  .sidebarWidth$(increment) {
    & .sidebarDrawer {
      width: 100%;
    }

    @media screen and (--larger-than-sm-viewport) {
      @mixin sidebarIncrements desktop;
    }
  }
}

@each $increment in 1, 2, 3, 4, 5, 6, 7, 8, 9 {
  .sidebarWidth$(increment) {
    @media screen and (--larger-than-xs-viewport) and (--landscape) {
      @mixin sidebarIncrements mobile;
    }

    @media screen and (--larger-than-xs-viewport) and (orientation: portrait) {
      @mixin sidebarIncrements desktop;
    }
  }
}

@each $increment in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 {
  .sidebarWidth$(increment) {
    @media screen and (--larger-than-sm-tablet-viewport) {
      @mixin sidebarIncrements desktop;
    }
  }
}

@each $pct in 25, 33, 50, 66, 75, 100 {
  .sidebarWidth$(pct) {
    & .sidebarDrawer {
      width: 100%;
    }
  }
}

@media screen and (--larger-than-sm-tablet-viewport) {
  @each $pct in 25, 33, 50, 66, 75, 100 {
    .sidebarWidth$(pct) {
      & .panel {
        right: calc($(pct) * 1%);
      }

      & .sidebarDrawer {
        width: calc($(pct) * 1%);
      }

      &:not(.sidebarClipped) {
        & .appbarAppBar {
          padding-right: calc(calc($(pct) * 1%) + var(--appbar-h-padding));
        }
      }
    }
  }
}