formstone/src/less/themes/light/navigation.less

Library of modular front end components.

/**
 * @theme
 * @name Light
 * @component Navigation
 */

.fs-navigation {

    @import "_config.less";

  @theme_name: fs-light;

  // Config

  @fs-navigation-margin: 0;

  @fs-navigation-icon-offset: 15px;
  @fs-navigation-icon-color: @fs-light-primary_500;
  @fs-navigation-icon-height: 3px;
  @fs-navigation-icon-width: 15px;
  @fs-navigation-icon-gap: 2px;

  @fs-navigation-icon-close-size: 15px;
  @fs-navigation-icon-close-font-size: 22px;

  // Toggle

  @fs-navigation-toggle-background: @fs-light-white;
  @fs-navigation-toggle-border-color: @fs-light-primary_500;
  @fs-navigation-toggle-border-size: 1px;
  @fs-navigation-toggle-border-radius: 2px;
  @fs-navigation-toggle-padding: 20px;

  // Handle

  @fs-navigation-handle-background: @fs-light-white;
  @fs-navigation-handle-border-color: @fs-light-primary_500;
  @fs-navigation-handle-border-size: 1px;
  @fs-navigation-handle-border-radius: 2px;
  @fs-navigation-handle-text-color: @fs-light-primary_900;
  @fs-navigation-handle-font-size: 14px;
  @fs-navigation-handle-height: 40px;
  @fs-navigation-handle-padding: 0 45px 0 15px;

  @fs-navigation-handle-hover-background: @fs-light-primary_100;

  // Slide

  @fs-navigation-offscreen-background: @fs-light-primary_50;
  @fs-navigation-offscreen-width: 270px;
  @fs-navigation-offscreen-zindex: 0;
  @fs-navigation-offscreen-padding: 20px;

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

  @fs-navigation-offscreen-content-box-shadow-color: rgba(0, 0, 0, 0.15);
  @fs-navigation-offscreen-content-box-shadow-blur: 2px;

  @fs-navigation-overlay-zindex: 3;

  @fs-navigation-overlay-content-background: @fs-light-white;
  @fs-navigation-overlay-content-opacity: 75;
  @fs-navigation-overlay-content-zindex: 2;

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

  // theme

  .@{theme_name}&-enabled {
    margin: @fs-navigation-margin;
  }

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

  // toggle

  .@{theme_name}&-toggle-nav&-enabled {
    background: @fs-navigation-toggle-background;
    border: @fs-navigation-toggle-border-size solid @fs-navigation-toggle-border-color;
    border-width: 0 @fs-navigation-toggle-border-size @fs-navigation-toggle-border-size;
    border-radius: 0 0 @fs-navigation-toggle-border-radius @fs-navigation-toggle-border-radius;
    padding: @fs-navigation-toggle-padding;
  }

  .@{theme_name}&-toggle-nav&-open {

  }

  // toggle handle

  .@{theme_name}&-toggle-handle&-enabled {
    width: 100%;

    background: @fs-navigation-handle-background;
    border: @fs-navigation-handle-border-size solid @fs-navigation-handle-border-color;
    border-radius: @fs-navigation-handle-border-radius;
    color: @fs-navigation-handle-text-color;
    cursor: pointer;
    display: block;
    font-size: @fs-navigation-handle-font-size;
    height: @fs-navigation-handle-height;
    line-height: @fs-navigation-handle-height;
    margin: 0;
    padding: @fs-navigation-handle-padding;
    position: relative;
    user-select: none;
  }

  .no-touchevents .@{theme_name}&-toggle-handle&-enabled:hover,
  .@{theme_name}&-toggle-handle&-enabled&-focus {
    background: @fs-navigation-handle-hover-background;
  }

  .@{theme_name}&-toggle-handle&-open {
    border-radius: @fs-navigation-handle-border-radius @fs-navigation-handle-border-radius 0 0;
  }

  // Navs

  .@{theme_name}&-push-nav&-enabled,
  .@{theme_name}&-reveal-nav&-enabled,
  .@{theme_name}&-overlay-nav&-enabled {
    background: @fs-navigation-offscreen-background;
    padding: @fs-navigation-offscreen-padding;
  }

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

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

  .@{theme_name}&-push-nav&-animated,
  .@{theme_name}&-overlay-nav&-animated {
    transition:
      box-shadow 0.001s linear @fs-navigation-offscreen-transition-speed, // delay when closing
      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

  .@{theme_name}&-push-nav&-enabled,
  .@{theme_name}&-reveal-nav&-enabled {
    z-index: @fs-navigation-push-zindex;
  }

  .@{theme_name}&-push-left-nav&-enabled,
  .@{theme_name}&-reveal-left-nav&-enabled,
  .@{theme_name}&-overlay-left-nav&-enabled {

  }

  .@{theme_name}&-push-right-nav&-enabled,
  .@{theme_name}&-reveal-right-nav&-enabled,
  .@{theme_name}&-overlay-right-nav&-enabled {

  }

  // push / overlay

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

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

  // overlay

  .@{theme_name}&-overlay-nav&-enabled {
    z-index: @fs-navigation-overlay-zindex;
    box-shadow: 0 0 @fs-navigation-offscreen-content-box-shadow-blur @fs-navigation-offscreen-content-box-shadow-color;
  }

  .@{theme_name}&-overlay-left-nav&-open {
    box-shadow: @fs-navigation-offscreen-content-box-shadow-blur 0 @fs-navigation-offscreen-content-box-shadow-blur @fs-navigation-offscreen-content-box-shadow-color;
  }

  .@{theme_name}&-overlay-right-nav&-open {
    box-shadow: -(@fs-navigation-offscreen-content-box-shadow-blur) 0 @fs-navigation-offscreen-content-box-shadow-blur @fs-navigation-offscreen-content-box-shadow-color;
  }

  // open

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

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

  // handles

  .@{theme_name}&-push-handle&-enabled,
  .@{theme_name}&-reveal-handle&-enabled,
  .@{theme_name}&-overlay-handle&-enabled {
    background: @fs-navigation-handle-background;
    border: @fs-navigation-handle-border-size solid @fs-navigation-handle-border-color;
    border-radius: @fs-navigation-handle-border-radius;
    color: @fs-navigation-handle-text-color;
    cursor: pointer;
    display: block;
    font-size: @fs-navigation-handle-font-size;
    height: @fs-navigation-handle-height;
    line-height: @fs-navigation-handle-height;
    margin: 0;
    padding: @fs-navigation-handle-padding;
    position: relative;
    user-select: none;
  }

  .no-touchevents .@{theme_name}&-push-handle&-enabled:hover,
  .no-touchevents .@{theme_name}&-reveal-handle&-enabled:hover,
  .no-touchevents .@{theme_name}&-overlay-handle&-enabled:hover,
  .@{theme_name}&-push-handle&-enabled&-focus,
  .@{theme_name}&-reveal-handle&-enabled&-focus,
  .@{theme_name}&-overlay-handle&-enabled&-focus {
    background: @fs-navigation-handle-hover-background;
  }

  // content

  .@{theme_name}&-overlay-content:before {
    background: @fs-navigation-overlay-content-background;
    background: fade(@fs-navigation-overlay-content-background, @fs-navigation-overlay-content-opacity);
    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;
  }

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

  // Reveal

  .@{theme_name}&-reveal-content&-enabled,
  .@{theme_name}&-push-content&-enabled {
    z-index: @fs-navigation-push-content-zindex;

    box-shadow: 0 0 @fs-navigation-offscreen-content-box-shadow-blur @fs-navigation-offscreen-content-box-shadow-color;
    transform: translate3D(0, 0, 0);
  }

  .@{theme_name}&-reveal-content&-animated,
  .@{theme_name}&-push-content&-animated {
    transition:
      box-shadow @fs-navigation-offscreen-transition-speed @fs-navigation-offscreen-transition-timing,
      transform  @fs-navigation-offscreen-transition-speed @fs-navigation-offscreen-transition-timing;
  }

  .@{theme_name}&-reveal-left-content&-enabled,
  .@{theme_name}&-push-left-content&-enabled {
    box-shadow: -(@fs-navigation-offscreen-content-box-shadow-blur) 0 @fs-navigation-offscreen-content-box-shadow-blur @fs-navigation-offscreen-content-box-shadow-color;
  }

  .@{theme_name}&-reveal-right-content&-enabled,
  .@{theme_name}&-push-right-content&-enabled {
    box-shadow: @fs-navigation-offscreen-content-box-shadow-blur 0 @fs-navigation-offscreen-content-box-shadow-blur @fs-navigation-offscreen-content-box-shadow-color;
  }

  // open

  .@{theme_name}&-reveal-left-content&-open,
  .@{theme_name}&-push-left-content&-open {
    transform: translate3D(@fs-navigation-offscreen-width, 0, 0);
  }

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

  // Handles

  .@{theme_name}&-handle&-enabled {
    position: relative;
  }

  .@{theme_name}&-handle&-enabled:after {
    height: @fs-navigation-icon-height;
    width: @fs-navigation-icon-width;

    position: absolute;
    top: 0;
    right: @fs-navigation-icon-offset;
    bottom: 0;

    background: @fs-navigation-icon-color;
    box-shadow:
      0  (@fs-navigation-icon-height + @fs-navigation-icon-gap) 0 @fs-navigation-icon-color,
      0 -(@fs-navigation-icon-height + @fs-navigation-icon-gap) 0 @fs-navigation-icon-color;
    content: '';
    display: block;
    margin: auto 0;
  }

  // Open

  .@{theme_name}&-handle&-open:after {
    width: @fs-navigation-icon-close-size;
    height: @fs-navigation-icon-close-size;

    background: transparent;
    border: none;
    box-shadow: none;
    color: @fs-navigation-icon-color;
    content: "\00d7";
    font-size: @fs-navigation-icon-close-font-size;
    font-weight: 700;
    line-height: @fs-navigation-icon-close-size - 2;
    text-align: center;
  }

  .@{theme_name}&-lock {

  }

}