content-layout.css

@import "../global/variables.css";

@value extra-small-screen-media, small-screen-media from "../global/global.css";
@value sidebarWidth: calc(var(--ring-unit) * 30);

.contentLayout {
  position: relative;

  display: flex;
  flex-flow: row nowrap;
}

.contentLayoutContent {
  align-self: flex-start;
  flex-grow: 2;

  width: 100%; /* without this hack IE11 render contentLayoutContent wider than its container */
  margin: 0 calc(var(--ring-unit) * 4);
}

.sidebarContainer {
  min-width: sidebarWidth;
  max-width: sidebarWidth;
}

.sidebarContainerRight {
  order: 1;
}

.sidebar {
  overflow: auto;

  box-sizing: border-box;
  min-width: sidebarWidth;
  max-width: sidebarWidth;
  height: 100%;
  padding-right: calc(var(--ring-unit) * 2);
  padding-left: calc(var(--ring-unit) * 4);
}

.sidebarRight {
  padding-right: calc(var(--ring-unit) * 4);
  padding-left: calc(var(--ring-unit) * 2);
}

.sidebarFixedTop {
  top: 0;
  bottom: 0;

  &.sidebarFixedTop {
    position: fixed;
  }
}

.sidebarFixedBottom.sidebarFixedBottom {
  position: absolute;
  top: auto;
  bottom: 0;
}

.bottomMarker {
  position: absolute;
  bottom: 0;
}

.contentLayoutResponsive {
  @media extra-small-screen-media, small-screen-media {
    & .contentLayoutContent {
      margin: 0 16px;
    }

    & .sidebar {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;

      box-sizing: content-box;
      padding: 0 16px;
    }

    & .sidebarFixedTop {
      position: fixed;
    }

    & .sidebarFixedBottom {
      top: auto;
    }

    & .sidebarRight {
      right: 0;
      left: auto;
    }

    & .sidebarContainer {
      min-width: 0;
      max-width: 0;
    }
  }

  @media extra-small-screen-media {
    & .sidebar {
      width: 80%;
      min-width: 0;
      max-width: none;
    }
  }
}