formstone/src/less/navigation.less

Library of modular front end components.

/**
 * @component
 * @name Number
 */

@import "imports/utils.less";

// Config

@fs-navigation-offscreen-background: #fff;
@fs-navigation-offscreen-width: 270px;
@fs-navigation-offscreen-zindex: 0;

@fs-navigation-offscreen-transition-speed: 0.2s;
@fs-navigation-offscreen-transition-timing: ease;

@fs-navigation-overlay-zindex: 3;

@fs-navigation-overlay-content-background: #fff;
@fs-navigation-overlay-content-opacity: 75;
@fs-navigation-overlay-content-zindex: 2;

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

/**
 * @class
 * @name .fs-navigation-element
 * @type element
 * @description Target elmement
 */

/**
 * @class
 * @name .fs-navigation
 * @type element
 * @description Base widget class
 */

.fs-navigation {

  &&-enabled {

  }

  &,
  &:after,
  &:before,
  *,
  *:after,
  *:before {
    box-sizing: border-box;
    transition: none;
    user-select: none !important;
  }

  /**
   * @class
   * @name .fs-navigation-toggle-nav
   * @type element
   * @description Toggle navigation
   */
  /**
   * @class
   * @name .fs-navigation-toggle-nav.fs-navigation-enabled
   * @type modifier
   * @description Indicates enabled state
   */

  &-toggle-nav&-enabled {
    display: none;
  }

  /**
   * @class
   * @name .fs-navigation-toggle-nav.fs-navigation-open
   * @type modifier
   * @description Indicates open state
   */

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

  /**
   * @class
   * @name .fs-navigation-toggle-handle
   * @type element
   * @description Toggle handle
   */
  /**
   * @class
   * @name .fs-navigation-toggle-handle.fs-navigation-enabled
   * @type modifier
   * @description Indicates enabled state
   */
  /**
   * @class
   * @name .fs-navigation-toggle-handle.fs-navigation-open
   * @type modifier
   * @description Indicates open state
   */

  &-toggle-handle&-enabled {
    .fs_button;

    width: 100%;

    cursor: pointer;
    display: block;
  }

  &-toggle-handle&-open {

  }

  /**
   * @class
   * @name .fs-navigation-overlay-nav
   * @type element
   * @description Overlay nav
   */
  /**
   * @class
   * @name .fs-navigation-overlay-nav.fs-navigation-enabled
   * @type modifier
   * @description Indicates enabled state
   */
  /**
   * @class
   * @name .fs-navigation-overlay-nav.fs-navigation-animated
   * @type modifier
   * @description Indicates animated state
   */
  /**
   * @class
   * @name .fs-navigation-overlay-nav.fs-navigation-open
   * @type modifier
   * @description Indicates open state
   */
  /**
   * @class
   * @name .fs-navigation-overlay-left-nav
   * @type modifier
   * @description Indicates left hand nav
   */
  /**
   * @class
   * @name .fs-navigation-overlay-right-nav
   * @type modifier
   * @description Indicates right hand nav
   */

  /**
   * @class
   * @name .fs-navigation-push-nav
   * @type element
   * @description Push nav
   */
  /**
   * @class
   * @name .fs-navigation-push-nav.fs-navigation-enabled
   * @type modifier
   * @description Indicates enabled state
   */
  /**
   * @class
   * @name .fs-navigation-push-nav.fs-navigation-animated
   * @type modifier
   * @description Indicates animated state
   */
  /**
   * @class
   * @name .fs-navigation-push-nav.fs-navigation-open
   * @type modifier
   * @description Indicates open state
   */
  /**
   * @class
   * @name .fs-navigation-push-left-nav
   * @type modifier
   * @description Indicates left hand nav
   */
  /**
   * @class
   * @name .fs-navigation-push-right-nav
   * @type modifier
   * @description Indicates right hand nav
   */

  /**
   * @class
   * @name .fs-navigation-reveal-nav
   * @type element
   * @description Reveal nav
   */
  /**
   * @class
   * @name .fs-navigation-reveal-nav.fs-navigation-enabled
   * @type modifier
   * @description Indicates enabled state
   */
  /**
   * @class
   * @name .fs-navigation-reveal-nav.fs-navigation-animated
   * @type modifier
   * @description Indicates animated state
   */
  /**
   * @class
   * @name .fs-navigation-reveal-nav.fs-navigation-open
   * @type modifier
   * @description Indicates open state
   */
  /**
   * @class
   * @name .fs-navigation-reveal-left-nav
   * @type modifier
   * @description Indicates left hand nav
   */
  /**
   * @class
   * @name .fs-navigation-reveal-right-nav
   * @type modifier
   * @description Indicates right hand nav
   */

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

    position: fixed;
    top: 0;

    background: @fs-navigation-offscreen-background;
    display: block;
    overflow: auto;

    -webkit-overflow-scrolling: touch;
  }

  &-push-nav&-enabled,
  &-reveal-nav&-enabled {
    visibility: hidden;
  }

  &-reveal-nav&-animated {
    transition: visibility 0.001s linear @fs-navigation-offscreen-transition-speed; // delay when closing
  }

  &-push-nav&-animated,
  &-overlay-nav&-animated {
    transition:
      transform @fs-navigation-offscreen-transition-speed @fs-navigation-offscreen-transition-timing,
      visibility 0.001s linear @fs-navigation-offscreen-transition-speed; // delay when closing
  }

  // reveal / push / overlay

  &-push-nav&-enabled,
  &-reveal-nav&-enabled {
    z-index: @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(-(@fs-navigation-offscreen-width), 0, 0);
  }

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

  // overlay

  &-overlay-nav&-enabled {
    z-index: @fs-navigation-overlay-zindex;
  }

  &-overlay-left-nav&-enabled {

  }

  &-overlay-right-nav&-enabled {

  }

  // open

  &-reveal-nav&-open {
    visibility: visible;
    transition: visibility 0.001s @fs-navigation-offscreen-transition-timing;
  }

  &-push-nav&-open,
  &-overlay-nav&-open {
    transform: translate3D(0, 0, 0);
    transition:
      transform @fs-navigation-offscreen-transition-speed @fs-navigation-offscreen-transition-timing,
      visibility 0.001s @fs-navigation-offscreen-transition-timing;
    visibility: visible;
  }

  /**
   * @class
   * @name .fs-navigation-overlay-handle
   * @type element
   * @description Overlay handle
   */
  /**
   * @class
   * @name .fs-navigation-overlay-handle.fs-navigation-enabled
   * @type modifier
   * @description Indicates enabled state
   */

  /**
   * @class
   * @name .fs-navigation-push-handle
   * @type element
   * @description Push handle
   */
  /**
   * @class
   * @name .fs-navigation-push-handle.fs-navigation-enabled
   * @type modifier
   * @description Indicates enabled state
   */

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

    cursor: pointer;
    display: block;
  }

  /**
   * @class
   * @name .fs-navigation-overlay-content:before
   * @type element
   * @description Overlay mask
   */
  /**
   * @class
   * @name .fs-navigation-overlay-content.fs-navigation-open:before
   * @type modifier
   * @description Indicates open state
   */

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

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

    background: @fs-navigation-overlay-content-background;
    background: fade(@fs-navigation-overlay-content-background, @fs-navigation-overlay-content-opacity);
    content: '';
    display: block;
    opacity: 0;
    transition:
      opacity @fs-navigation-offscreen-transition-speed @fs-navigation-offscreen-transition-timing,
      visibility @fs-navigation-offscreen-transition-speed @fs-navigation-offscreen-transition-timing;
    visibility: hidden;
  }

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

  /**
   * @class
   * @name .fs-navigation-push-content
   * @type element
   * @description Target page content
   */
  /**
   * @class
   * @name .fs-navigation-push-content.fs-navigation-enabled
   * @type modifier
   * @description Indicates enabled state
   */
  /**
   * @class
   * @name .fs-navigation-push-content.fs-navigation-animated
   * @type modifier
   * @description Indicates animted state
   */
  /**
   * @class
   * @name .fs-navigation-push-content.fs-navigation-open
   * @type modifier
   * @description Indicates open state
   */

  /**
   * @class
   * @name .fs-navigation-push-left-content
   * @type modifier
   * @description Indicates left hand nav
   */
  /**
   * @class
   * @name .fs-navigation-push-right-content
   * @type modifier
   * @description Indicates right hand nav
   */

  /**
   * @class
   * @name .fs-navigation-reveal-content
   * @type element
   * @description Target page content
   */
  /**
   * @class
   * @name .fs-navigation-reveal-content.fs-navigation-enabled
   * @type modifier
   * @description Indicates enabled state
   */
  /**
   * @class
   * @name .fs-navigation-reveal-content.fs-navigation-animated
   * @type modifier
   * @description Indicates animted state
   */
  /**
   * @class
   * @name .fs-navigation-reveal-content.fs-navigation-open
   * @type modifier
   * @description Indicates open state
   */

  /**
   * @class
   * @name .fs-navigation-reveal-left-content
   * @type modifier
   * @description Indicates left hand nav
   */
  /**
   * @class
   * @name .fs-navigation-reveal-right-content
   * @type modifier
   * @description Indicates right hand nav
   */

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

    display: block;
    overflow: hidden;
    transform: translate3D(0, 0, 0);
  }

  &-reveal-content&-animated,
  &-push-content&-animated {
    transition:
      transform @fs-navigation-offscreen-transition-speed @fs-navigation-offscreen-transition-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: translateX(@fs-navigation-offscreen-width);
  }

  &-reveal-right-content&-open,
  &-push-right-content&-open {
    transform: translateX(-(@fs-navigation-offscreen-width));
  }

  /**
   * @class
   * @name .fs-navigation-handle
   * @type element
   * @description Click target to toggle navigation
   */
  /**
   * @class
   * @name .fs-navigation-handle.fs-navigation-open
   * @type modifier
   * @description Indicates open state
   */
  /**
   * @class
   * @name .fs-navigation-handle.fs-navigation-enabled
   * @type modifier
   * @description Indicates enabled state
   */

  &-handle&-enabled {
    .fs_button;
  }

  /**
   * @class
   * @name .fs-navigation-lock
   * @type modifier
   * @description Indicates locked state; Applied to body element
   */

  &-lock {
    overflow: hidden !important;
  }
}