@enact/sandstone/useScroll/ScrollbarTrack.module.css

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

.scrollbarTrack {
  --scrollbar-track-margin: 0.25rem;
  --scrollbar-thumb-size-ratio: 1;
  --scrollbar-thumb-progress-ratio: 0;
  --scrollbar-thumb-size: calc(100% * var(--scrollbar-thumb-size-ratio));
  --scrollbar-thumb-progress: calc(((1 - var(--scrollbar-thumb-size-ratio)) * var(--scrollbar-thumb-progress-ratio)) * 100%);
  position: relative;
  height: 100%;
  width: 100%;
  background-color: rgb(var(--sand-progress-bg-color-rgb, 55, 58, 65), 50%);
  border-radius: 0.25rem;
  opacity: 0;
  transition: opacity 100ms ease-out;
}
.scrollbarTrack:hover {
  opacity: 1;
}
.scrollbarTrack.focusableScrollbar {
  opacity: 1;
  --scrollbar-track-margin: 0.5rem;
}
.scrollbarTrack .thumb {
  background: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 60%);
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0.25rem;
}
:global(.spotlight-input-key) .scrollbarTrack .thumb:global(.spottable):focus,
:global(.spotlight-input-mouse) .scrollbarTrack .thumb:global(.spottable):focus {
  position: absolute;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  border-radius: 0.25rem;
}
:global(.spotlight-input-key) .scrollbarTrack .thumb:global(.spottable):focus .directionIndicator,
:global(.spotlight-input-mouse) .scrollbarTrack .thumb:global(.spottable):focus .directionIndicator {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 0.25rem solid transparent;
  border-bottom: 0.25rem solid rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89), 40%);
  border-right: 0.1875rem solid transparent;
  border-left: 0.1875rem solid transparent;
}
:global(.spotlight-input-touch) .scrollbarTrack .thumb:global(.spottable):active {
  position: absolute;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
  border-radius: 0.25rem;
}
:global(.spotlight-input-touch) .scrollbarTrack .thumb:global(.spottable):active .directionIndicator {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 0.25rem solid transparent;
  border-bottom: 0.25rem solid rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89), 40%);
  border-right: 0.1875rem solid transparent;
  border-left: 0.1875rem solid transparent;
}
:global(.spotlight-input-touch) .scrollbarTrack .thumb {
  pointer-events: none;
}
.scrollbarTrack.vertical {
  margin: 0 var(--scrollbar-track-margin);
  width: 0.25rem;
}
.scrollbarTrack.vertical .thumb {
  height: var(--scrollbar-thumb-size);
  top: var(--scrollbar-thumb-progress);
  will-change: top;
}
.scrollbarTrack.vertical .thumb:focus {
  width: 0.625rem;
  left: -0.1875rem;
}
.scrollbarTrack.vertical .thumb:focus .directionIndicator.backward {
  top: calc(6px - 0.25rem);
  left: 0.125rem;
}
.scrollbarTrack.vertical .thumb:focus .directionIndicator.forward {
  transform: rotate(180deg);
  bottom: calc(6px - 0.25rem);
  left: 0.125rem;
}
.scrollbarTrack:not(.vertical) {
  margin: var(--scrollbar-track-margin) 0;
  height: 0.25rem;
}
.scrollbarTrack:not(.vertical) .thumb {
  width: var(--scrollbar-thumb-size);
  left: var(--scrollbar-thumb-progress);
  will-change: left;
  top: 50%;
  transform: translateY(-50%);
}
:global(.spotlight-input-key) .scrollbarTrack:not(.vertical) .thumb:global(.spottable):focus,
:global(.spotlight-input-mouse) .scrollbarTrack:not(.vertical) .thumb:global(.spottable):focus {
  height: 0.625rem;
}
:global(.spotlight-input-key) .scrollbarTrack:not(.vertical) .thumb:global(.spottable):focus .directionIndicator.backward,
:global(.spotlight-input-mouse) .scrollbarTrack:not(.vertical) .thumb:global(.spottable):focus .directionIndicator.backward {
  transform: rotate(-90deg);
  left: calc(6px - 0.25rem);
  top: calc(0.125rem / 2);
}
:global(.spotlight-input-key) .scrollbarTrack:not(.vertical) .thumb:global(.spottable):focus .directionIndicator.forward,
:global(.spotlight-input-mouse) .scrollbarTrack:not(.vertical) .thumb:global(.spottable):focus .directionIndicator.forward {
  transform: rotate(90deg);
  right: calc(6px - 0.25rem);
  top: calc(0.125rem / 2);
}
:global(.spotlight-input-touch) .scrollbarTrack:not(.vertical) .thumb:global(.spottable):active {
  height: 0.625rem;
}
:global(.spotlight-input-touch) .scrollbarTrack:not(.vertical) .thumb:global(.spottable):active .directionIndicator.backward {
  transform: rotate(-90deg);
  left: calc(6px - 0.25rem);
  top: calc(0.125rem / 2);
}
:global(.spotlight-input-touch) .scrollbarTrack:not(.vertical) .thumb:global(.spottable):active .directionIndicator.forward {
  transform: rotate(90deg);
  right: calc(6px - 0.25rem);
  top: calc(0.125rem / 2);
}