@zippytech/react-scroll-container/index.css

Custom scrollbars for your React components

.zippy-react-scroll-container {
  overflow: hidden;
  position: relative;
  flex-flow: column;
  flex: 1 1 0; }
  .zippy-react-scroll-container--block {
    display: flex; }
  .zippy-react-scroll-container--inline-block {
    display: inline-flex; }
  .zippy-react-scroll-container__wrapper {
    display: flex;
    flex: 1 1 auto; }
  .zippy-react-scroll-container__scroller {
    overflow: scroll;
    flex: 1;
    position: relative;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column;
    display: flex; }
    .zippy-react-scroll-container__scroller--avoid-repaint {
      backface-visibility: hidden; }
    .zippy-react-scroll-container__scroller--hide-native-scrollbar-if-possible::-webkit-scrollbar {
      display: none; }
  .zippy-react-scroll-container__view {
    flex: 1 0 auto;
    position: relative;
    box-sizing: border-box; }
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      .zippy-react-scroll-container__view {
        /* because of CSS flexbox bugs, IE 10-11 need this rule */
        /* this is NOT APPLIED in Edge or other browsers */
        max-width: 100%; } }
    .zippy-react-scroll-container__view--zero-width-scrollbar {
      flex: 1 0 100%; }
  .zippy-react-scroll-container__scrollbar {
    pointer-events: none;
    user-select: none;
    opacity: 1;
    transition-property: opacity;
    transition-duration: 100ms;
    overflow: visible;
    z-index: 1; }
    .zippy-react-scroll-container__scrollbar--hidden {
      opacity: 0;
      transition-duration: 300ms; }
  .zippy-react-scroll-container__track {
    pointer-events: none;
    position: relative;
    transition-property: background-color;
    transition-duration: 100ms;
    cursor: auto; }
    .zippy-react-scroll-container__track--drag-to-scroll {
      pointer-events: all; }
    .zippy-react-scroll-container__track--orientation-vertical {
      height: 100%; }
    .zippy-react-scroll-container__track--visible {
      cursor: pointer; }
  .zippy-react-scroll-container__thumb {
    user-select: none;
    display: block;
    cursor: auto;
    will-change: transform;
    position: absolute; }
    .zippy-react-scroll-container__thumb--orientation-vertical {
      top: 0;
      right: 0;
      transition-property: width; }
    .zippy-react-scroll-container__thumb--orientation-horizontal {
      left: 0;
      bottom: 0;
      transition-property: height; }

.zippy--hide-native-scroll-if-possible::-webkit-scrollbar {
  display: none; }

.zippy-react-scroll-container--theme-default .zippy-react-scroll-container__track--visible {
  background-color: rgba(0, 0, 0, 0.15); }

.zippy-react-scroll-container--theme-default .zippy-react-scroll-container__thumb {
  background-color: rgba(0, 0, 0, 0.25); }