@enact/moonstone/UiScrollable/UiScrollThumb.module.css

Large-screen/TV support library for Enact, containing a variety of UI components.

.scrollThumb {
  /* Set these to reasonable default values */
  --scrollbar-size-ratio: 1;
  --scrollbar-progress-ratio: 0;
  --scrollbar-size: calc(100% * var(--scrollbar-size-ratio));
  --scrollbar-progress: calc(((1 - var(--scrollbar-size-ratio)) * var(--scrollbar-progress-ratio)) * 100%);
  position: relative;
  width: 0.125rem;
  height: 0.125rem;
  margin: auto;
  opacity: 0;
  flex: auto;
  -webkit-transition: opacity 100ms linear;
  transition: opacity 100ms linear;
  will-change: transform, top, left, right;
}
.scrollThumb::before {
  background: rgba(102, 102, 102, 0.75);
  display: block;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  will-change: transform, top, left, right;
}
.scrollThumb.vertical::before {
  height: var(--scrollbar-size);
  top: var(--scrollbar-progress);
}
.scrollThumb:not(.vertical)::before {
  width: var(--scrollbar-size);
  left: var(--scrollbar-progress);
  top: 50%;
  transform: translateY(-50%);
}