@enact/sandstone/Scroller/Scroller.module.css

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

.focusableBody {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: inherit;
}
.focusableBody::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0.25rem;
  opacity: 0;
}
:global(.spotlight-input-key):global(.spotlight-input-key) .focusableBody:global(.spottable):focus::before,
:global(.spotlight-input-key):global(.spotlight-input-mouse) .focusableBody:global(.spottable):focus::before {
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230), 10%);
  opacity: 1;
}
:global(.spotlight-input-key):global(.spotlight-input-touch) .focusableBody:global(.spottable):active::before {
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230), 10%);
  opacity: 1;
}
.verticalFadeout {
  padding: 1rem 0;
  mask-image: linear-gradient(transparent, #000 1rem, #000 calc(100% - 1rem), transparent 100%);
}
.focusableBody .verticalFadeout {
  padding: 1.5rem 1rem 1.5rem 1.875rem;
  mask-image: linear-gradient(transparent 0.5rem, #000 calc(0.5rem + 1rem), #000 calc(100% - 1rem - 0.5rem), transparent calc(100% - 0.5rem));
}
:global(.enact-locale-right-to-left) .focusableBody .verticalFadeout {
  padding: 1.5rem 1.875rem 1.5rem 1rem;
}
.horizontalFadeout {
  padding: 0 1rem;
  mask-image: linear-gradient(to right, transparent, #000 1rem, #000 calc(100% - 1rem), transparent 100%);
}