react-scroll-box/src/main/index.less

Charged cross-browser and cross-platform scrollable container implementation with no external dependencies but React 0.13+

@scroll-box:                scroll-box; // Namespace class
@scroll-bar-border-radius:  @scroll-bar-hover-weight; // Rounded caps.

@scroll-bar-weight:         6px; // Height of width for horizontal or vertical scroll bar respectively.
@scroll-bar-hover-weight:   (@scroll-bar-weight * 1.7);
@scroll-bar-offset:         4px; // Distance from scroll box container border to scroll bar.
@scroll-bar-min-size:       30px;
@scroll-bar-max-size:       100%;

@scroll-bar-y-width:        @scroll-bar-weight;
@scroll-bar-y-hover-width:  @scroll-bar-hover-weight;
@scroll-bar-y-top:          @scroll-bar-offset;
@scroll-bar-y-bottom:       @scroll-bar-offset;
@scroll-bar-y-right:        @scroll-bar-offset;
@scroll-bar-y-min-height:   @scroll-bar-min-size;
@scroll-bar-y-max-height:   @scroll-bar-max-size;

@scroll-bar-x-height:       @scroll-bar-weight;
@scroll-bar-x-hover-height: @scroll-bar-hover-weight;
@scroll-bar-x-left:         @scroll-bar-offset;
@scroll-bar-x-right:        @scroll-bar-offset;
@scroll-bar-x-bottom:       @scroll-bar-offset;
@scroll-bar-x-min-width:    @scroll-bar-min-size;
@scroll-bar-x-max-width:    @scroll-bar-max-size;

@scroll-cursor-handle:      default;
@scroll-cursor-track:       default;

.@{scroll-box} {
  position: relative;

  &:focus {
    outline: none;
  }

  &--disabled {
    > .@{scroll-box}__viewport {
      // Hide client scrollbars.
      overflow: hidden !important;
    }
    > .@{scroll-box}__track {
      // Hide custom scrollbars.
      visibility: hidden !important;
    }
  }

  // By default scroll box looks like an unwrapped container.
  &--wrapped {
    .scroll-box-wrap();
  }

  // Used if fallback to client system scrolling should occur.
  &--client-scroll-bars {

    &.@{scroll-box}--enable-y.@{scroll-box}--requires-y > .@{scroll-box}__viewport {
      overflow-y: auto;
    }
    &.@{scroll-box}--enable-x.@{scroll-box}--requires-x > .@{scroll-box}__viewport {
      overflow-x: auto;
    }
    > .@{scroll-box}__viewport {
      -webkit-overflow-scrolling: touch;
    }
  }

  &:not(.@{scroll-box}--client-scroll-bars) {
    &.@{scroll-box}--enable-y.@{scroll-box}--requires-y > .@{scroll-box}__track--y {
      visibility: visible;
    }
    &.@{scroll-box}--enable-x.@{scroll-box}--requires-x > .@{scroll-box}__track--x {
      visibility: visible;
    }

    // Both non-client scrollbars are visible and they are inside
    // scrollable are, we should prevent their intersection in the
    // shared corner.
    &.@{scroll-box}--enable-x.@{scroll-box}--requires-x.@{scroll-box}--enable-y.@{scroll-box}--requires-y:not(.@{scroll-box}--outset) {
      > .@{scroll-box}__track {
        &--y {
          margin-bottom: (2 * @scroll-bar-y-bottom + @scroll-bar-x-height);
        }
        &--x {
          margin-right: (2 * @scroll-bar-x-right + @scroll-bar-y-width);
        }
      }
    }
  }

  &__handle,
  &__track {
    position: absolute;
    border-radius: @scroll-bar-border-radius;
    transition: .2s ease-in-out;
  }
  &__handle {
    transition-property: background;
    cursor: @scroll-cursor-handle;

    &--y {
      width: 100%;
      min-height: @scroll-bar-y-min-height;
      max-height: @scroll-bar-y-max-height;
      top: 0;
    }
    &--x {
      height: 100%;
      min-width: @scroll-bar-x-min-width;
      max-width: @scroll-bar-x-max-width;
      left: 0;
    }
  }
  &__track {
    display: none; // Scroll not used by default.
    visibility: hidden;
    transition-property: background, width, height;
    cursor: @scroll-cursor-track;

    &--y {
      top: 0;
      bottom: 0;
      right: 0;
      width: @scroll-bar-y-width;
      margin: @scroll-bar-y-top @scroll-bar-y-right @scroll-bar-y-bottom 0;

      &.@{scroll-box}__track {
        &--hover,
        &--dragged {
          width: @scroll-bar-y-hover-width;
        }
      }
      .@{scroll-box}--outset > & {
        left: 100%;
        margin-left: @scroll-bar-y-right;
      }
    }
    &--x {
      left: 0;
      right: 0;
      bottom: 0;
      height: @scroll-bar-x-height;
      margin: 0 @scroll-bar-x-right @scroll-bar-x-bottom @scroll-bar-x-left;

      &.@{scroll-box}__track {
        &--hover,
        &--dragged {
          height: @scroll-bar-x-hover-height;
        }
      }
      .@{scroll-box}--outset > & {
        top: 100%;
        margin-top: @scroll-bar-x-bottom;
      }
    }
  }

  // Apply default coloring.
  .scroll-box-color();
}

.scroll-box-wrap() {
  > .@{scroll-box}__viewport {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: inherit;
    border-radius: inherit;
  }
  > .@{scroll-box}__track {
    display: block;
  }
}

.scroll-box-color(
  @handle-bg:       rgba(0,0,0,.4);
  @track-bg:        transparent;
  @hover-handle-bg: rgba(0,0,0,.6);
  @hover-track-bg:  rgba(0,0,0,.2);
) {
  > .@{scroll-box}__track {
    background: @track-bg;

    > .@{scroll-box}__handle {
      background: @handle-bg;
    }
    &--hover,
    &--dragged {
      background: @hover-track-bg;

      > .@{scroll-box}__handle {
        background: @hover-handle-bg;
      }
    }
  }
}