formstone/src/less/navigation.less

Library of modular front end components.

@fs-navigation-offscreen-background: #fff;
@fs-navigation-offscreen-width: 80vw;
@fs-navigation-offscreen-zindex: 0;

@fs-navigation-offscreen-duration: 0.2s;
@fs-navigation-offscreen-timing: ease;

@fs-navigation-overlay-zindex: 3;

@fs-navigation-overlay-content-background: rgba(0, 0, 0, 0.8);
@fs-navigation-overlay-content-zindex: 2;

@fs-navigation-push-zindex: 0;
@fs-navigation-push-content-zindex: 1;

.fs-navigation {
  box-sizing: border-box;

  &,
  &-content {
    --fs-navigation-offscreen-background: @fs-navigation-offscreen-background;
    --fs-navigation-offscreen-width: @fs-navigation-offscreen-width;
    --fs-navigation-offscreen-zindex: @fs-navigation-offscreen-zindex;

    --fs-navigation-offscreen-duration: @fs-navigation-offscreen-duration;
    --fs-navigation-offscreen-timing: @fs-navigation-offscreen-timing;

    --fs-navigation-overlay-zindex: @fs-navigation-overlay-zindex;

    --fs-navigation-overlay-content-background: @fs-navigation-overlay-content-background;
    --fs-navigation-overlay-content-zindex: @fs-navigation-overlay-content-zindex;

    --fs-navigation-push-zindex: @fs-navigation-push-zindex;
    --fs-navigation-push-content-zindex: @fs-navigation-push-content-zindex;

    @media (prefers-reduced-motion) {

      & {
        --fs-navigation-offscreen-duration: 0s;
      }
    }
  }

  // Toggle

  &-toggle-nav&-enabled:not(&-open) {
    display: none;
  }

  &-toggle-nav&-open {
    // display: block;
  }

  &-toggle-handle&-enabled {
    width: 100%;

    cursor: pointer;
    display: block;
  }

  &-toggle-handle&-open {}

  // Overlay

  &-push-nav&-enabled,
  &-reveal-nav&-enabled,
  &-overlay-nav&-enabled {
    width: var(--fs-navigation-offscreen-width);
    height: calc(100% + 60px); // ??

    position: fixed;
    top: 0;

    background: var(--fs-navigation-offscreen-background);
    display: block;
    overflow-y: scroll;
    visibility: hidden;

    overscroll-behavior: contain;
  }

  //

  &-reveal-nav&-animated {
    transition: visibility 0.001s linear var(--fs-navigation-offscreen-duration);
  }

  &-push-nav&-animated,
  &-overlay-nav&-animated {
    transition:
      transform var(--fs-navigation-offscreen-duration) var(--fs-navigation-offscreen-timing),
      visibility 0.001s linear var(--fs-navigation-offscreen-duration);
  }

  // reveal / push / overlay

  &-push-nav&-enabled,
  &-reveal-nav&-enabled {
    z-index: var(--fs-navigation-push-zindex);
  }

  &-push-left-nav&-enabled,
  &-reveal-left-nav&-enabled,
  &-overlay-left-nav&-enabled {
    left: 0;
  }

  &-push-right-nav&-enabled,
  &-reveal-right-nav&-enabled,
  &-overlay-right-nav&-enabled {
    right: 0;
  }

  // reveal



  // push / overlay

  &-push-left-nav&-enabled,
  &-overlay-left-nav&-enabled {
    transform: translate3d(calc(var(--fs-navigation-offscreen-width) * -1), 0, 0);
  }

  &-push-right-nav&-enabled,
  &-overlay-right-nav&-enabled {
    transform: translate3d(var(--fs-navigation-offscreen-width), 0, 0);
  }

  // overlay

  &-overlay-nav&-enabled {
    z-index: var(--fs-navigation-overlay-zindex);
  }

  &-overlay-left-nav&-enabled {}

  &-overlay-right-nav&-enabled {}

  // open

  &-reveal-nav&-open {
    visibility: visible;
    transition: visibility 0.001s linear;
  }

  &-push-nav&-open,
  &-overlay-nav&-open {
    transform: translate3d(0, 0, 0);
    transition:
      transform var(--fs-navigation-offscreen-duration) var(--fs-navigation-offscreen-timing),
      visibility 0.001s linear;
    visibility: visible;
  }

  &-push-handle&-enabled,
  &-overlay-handle&-enabled {
    // .fs_button;

    cursor: pointer;
    display: block;
  }

  &-overlay-content:before {
    width: 100%;
    height: 100%;
    height: ~"calc(100% + 60px)";

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--fs-navigation-overlay-content-zindex);

    background: var(--fs-navigation-overlay-content-background);
    content: '';
    display: block;
    opacity: 0;
    overflow-y: scroll;
    overscroll-behavior: contain;
    transition:
      background var(--fs-navigation-offscreen-duration) var(--fs-navigation-offscreen-timing),
      opacity var(--fs-navigation-offscreen-duration) var(--fs-navigation-offscreen-timing),
      visibility var(--fs-navigation-offscreen-duration) var(--fs-navigation-offscreen-timing);
    visibility: hidden;
  }

  &-overlay-content&-open:before {
    opacity: 1;
    visibility: visible;
  }

  &-reveal-content&-enabled,
  &-push-content&-enabled {
    position: relative;
    z-index: var(--fs-navigation-push-content-zindex);

    display: block;
    transform: translate3d(0, 0, 0);
  }

  &-reveal-content&-animated,
  &-push-content&-animated {
    transition:
      transform var(--fs-navigation-offscreen-duration) var(--fs-navigation-offscreen-timing);
  }

  &-reveal-left-content&-enabled,
  &-push-left-content&-enabled {}

  &-reveal-right-content&-enabled,
  &-push-right-content&-enabled {}

  // open

  &-reveal-left-content&-open,
  &-push-left-content&-open {
    transform: translate3d(var(--fs-navigation-offscreen-width), 0, 0);
  }

  &-reveal-right-content&-open,
  &-push-right-content&-open {
    transform: translate3d(calc(var(--fs-navigation-offscreen-width) * -1), 0, 0);
  }
}