formstone/src/less/scrollbar.less

Library of modular front end components.

/**
 * @component
 * @name Tabs
 */

@import "imports/utils.less";

// Bar

@fs-scrollbar-bar-size: 20px;
@fs-scrollbar-bar-background: #fff;

// Track

@fs-scrollbar-track-background: #fff;

// Handle

@fs-scrollbar-handle-size: 20px;
@fs-scrollbar-handle-background: #999;

// Content

@fs-scrollbar-content-padding: 20px;

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

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

/**
 * @class
 * @name .fs-scrollbar.fs-scrollbar-horizontal
 * @type modifier
 * @description Indicates horizontal scrolling
 */

/**
 * @class
 * @name .fs-scrollbar.fs-scrollbar-setup
 * @type modifier
 * @description Indicates setup state
 */

 /**
 * @class
 * @name .fs-scrollbar.fs-scrollbar-active
 * @type modifier
 * @description Indicates active state
 */

.fs-scrollbar {

  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;

  &,
  & * {
    user-select: none !important;
  }

  &,
  &-content,
  &-bar,
  &-track,
  &-handle {
    box-sizing: border-box;
  }

  /**
   * @class
   * @name .fs-scrollbar-content
   * @type element
   * @description Scrolling content
   */

  &-content {
    position: relative;
    z-index: 1;

    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    // Webkit fix

    &::-webkit-scrollbar,
    &::-webkit-scrollbar-button,
    &::-webkit-scrollbar-track,
    &::-webkit-scrollbar-track-piece,
    &::-webkit-scrollbar-thumb,
    &::-webkit-scrollbar-corner,
    &::-webkit-resizer {
      background: transparent;
      opacity: 0;
    }
  }

  /**
   * @class
   * @name .fs-scrollbar-bar
   * @type element
   * @description Scrollbar container
   */

  &-bar {
    width: @fs-scrollbar-bar-size;
    height: 100%;

    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;

    background: @fs-scrollbar-bar-background;
    border: 1px solid;
    border-width: 0 0 0 1px;
    display: none;
  }

  /**
   * @class
   * @name .fs-scrollbar-track
   * @type element
   * @description Scrollbar track container
   */

  &-track {
    width: 100%;
    height: 100%;

    position: relative;

    background: @fs-scrollbar-track-background;
    overflow: hidden;
  }

  /**
   * @class
   * @name .fs-scrollbar-handle
   * @type element
   * @description Scrollbar handle
   */

  @fs-scrollbar-handle-position: ((@fs-scrollbar-bar-size - @fs-scrollbar-handle-size) / 2);

  &-handle {
    width: @fs-scrollbar-handle-size;
    height: (@fs-scrollbar-handle-size * 2);

    position: absolute;
    top: 0;
    right: @fs-scrollbar-handle-position;
    z-index: 2;

    background: @fs-scrollbar-handle-background;
    border: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
  }

  // Horizontal

  &-horizontal &-content {
    overflow: auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 @fs-scrollbar-bar-size 0;
  }

  &-horizontal &-bar {
    width: 100%;
    height: @fs-scrollbar-bar-size;

    top: auto;
    bottom: 0;

    border-width: 1px 0 0 0;
  }

  &-horizontal &-handle {
    width: (@fs-scrollbar-handle-size * 2);
    height: @fs-scrollbar-handle-size;

    top: auto;
    right: auto;
    bottom: @fs-scrollbar-handle-position;
  }

  // Active / Setup

  &-setup &-content,
  &-active &-content {
    padding: @fs-scrollbar-content-padding;
  }

  &-setup &-bar,
  &-active &-bar {
    display: block;
  }
}