@enact/sandstone/TabLayout/TabGroup.module.css

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

.tab {
  font-size: 1.375rem;
}
.tab.horizontal.button {
  display: block;
  margin: 0;
  padding: 0;
  height: 2.75rem;
}
.tab.horizontal.button .client {
  margin-left: 1rem;
  margin-right: 1rem;
}
.tab.horizontal.button.selected .client::after {
  content: "";
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.125rem;
}
.tab.vertical {
  margin-bottom: 0.5rem;
}
.tab.vertical.button {
  display: block;
  height: 3.25rem;
}
.tab.vertical.button:global(.largeText) {
  font-size: 1.375rem;
  min-width: 3rem;
}
.tab.vertical .client {
  text-align: left;
}
:global(.enact-locale-right-to-left) .tab.vertical .client {
  text-align: right;
}
.tab:global(.neutral).horizontal.button.selected .bg {
  opacity: 0;
}
.tab:global(.neutral).horizontal.button .client::after {
  background-color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) .tab:global(.neutral).horizontal.button:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .tab:global(.neutral).horizontal.button:global(.spottable):focus .bg {
  opacity: 1;
}
:global(.spotlight-input-key) .tab:global(.neutral).horizontal.button:global(.spottable):focus .client::after,
:global(.spotlight-input-mouse) .tab:global(.neutral).horizontal.button:global(.spottable):focus .client::after {
  background-color: unset;
}
:global(.spotlight-input-touch) .tab:global(.neutral).horizontal.button:global(.spottable):active .bg {
  opacity: 1;
}
:global(.spotlight-input-touch) .tab:global(.neutral).horizontal.button:global(.spottable):active .client::after {
  background-color: unset;
}
:global(.enact-a11y-high-contrast) .tab:global(.neutral):global(.highContrast).horizontal.button.selected .bg {
  opacity: 0;
}
:global(.enact-a11y-high-contrast) .tab:global(.neutral):global(.highContrast).horizontal.button .client::after {
  background-color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .tab:global(.neutral):global(.highContrast).horizontal.button:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .tab:global(.neutral):global(.highContrast).horizontal.button:global(.spottable):focus .bg {
  opacity: 1;
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .tab:global(.neutral):global(.highContrast).horizontal.button:global(.spottable):focus .client::after,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .tab:global(.neutral):global(.highContrast).horizontal.button:global(.spottable):focus .client::after {
  background-color: unset;
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .tab:global(.neutral):global(.highContrast).horizontal.button:global(.spottable):active .bg {
  opacity: 1;
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .tab:global(.neutral):global(.highContrast).horizontal.button:global(.spottable):active .client::after {
  background-color: unset;
}
.tab:global(.light).horizontal.button.selected .bg {
  opacity: 0;
}
.tab:global(.light).horizontal.button .client::after {
  background-color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) .tab:global(.light).horizontal.button:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .tab:global(.light).horizontal.button:global(.spottable):focus .bg {
  opacity: 1;
}
:global(.spotlight-input-key) .tab:global(.light).horizontal.button:global(.spottable):focus .client::after,
:global(.spotlight-input-mouse) .tab:global(.light).horizontal.button:global(.spottable):focus .client::after {
  background-color: unset;
}
:global(.spotlight-input-touch) .tab:global(.light).horizontal.button:global(.spottable):active .bg {
  opacity: 1;
}
:global(.spotlight-input-touch) .tab:global(.light).horizontal.button:global(.spottable):active .client::after {
  background-color: unset;
}
.tab:global(.game).horizontal.button.selected .bg {
  opacity: 0;
}
.tab:global(.game).horizontal.button .client::after {
  background-color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) .tab:global(.game).horizontal.button:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .tab:global(.game).horizontal.button:global(.spottable):focus .bg {
  opacity: 1;
}
:global(.spotlight-input-key) .tab:global(.game).horizontal.button:global(.spottable):focus .client::after,
:global(.spotlight-input-mouse) .tab:global(.game).horizontal.button:global(.spottable):focus .client::after {
  background-color: unset;
}
:global(.spotlight-input-touch) .tab:global(.game).horizontal.button:global(.spottable):active .bg {
  opacity: 1;
}
:global(.spotlight-input-touch) .tab:global(.game).horizontal.button:global(.spottable):active .client::after {
  background-color: unset;
}
:global(.green) .tab:global(.game).horizontal.button.selected .bg {
  opacity: 0;
}
:global(.green) .tab:global(.game).horizontal.button .client::after {
  background-color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.green) .tab:global(.game).horizontal.button:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.green) .tab:global(.game).horizontal.button:global(.spottable):focus .bg {
  opacity: 1;
}
:global(.spotlight-input-key) :global(.green) .tab:global(.game).horizontal.button:global(.spottable):focus .client::after,
:global(.spotlight-input-mouse) :global(.green) .tab:global(.game).horizontal.button:global(.spottable):focus .client::after {
  background-color: unset;
}
:global(.spotlight-input-touch) :global(.green) .tab:global(.game).horizontal.button:global(.spottable):active .bg {
  opacity: 1;
}
:global(.spotlight-input-touch) :global(.green) .tab:global(.game).horizontal.button:global(.spottable):active .client::after {
  background-color: unset;
}
:global(.orange) .tab:global(.game).horizontal.button.selected .bg {
  opacity: 0;
}
:global(.orange) .tab:global(.game).horizontal.button .client::after {
  background-color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.orange) .tab:global(.game).horizontal.button:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.orange) .tab:global(.game).horizontal.button:global(.spottable):focus .bg {
  opacity: 1;
}
:global(.spotlight-input-key) :global(.orange) .tab:global(.game).horizontal.button:global(.spottable):focus .client::after,
:global(.spotlight-input-mouse) :global(.orange) .tab:global(.game).horizontal.button:global(.spottable):focus .client::after {
  background-color: unset;
}
:global(.spotlight-input-touch) :global(.orange) .tab:global(.game).horizontal.button:global(.spottable):active .bg {
  opacity: 1;
}
:global(.spotlight-input-touch) :global(.orange) .tab:global(.game).horizontal.button:global(.spottable):active .client::after {
  background-color: unset;
}
:global(.neutral) .tabGroup .horizontalLine {
  width: 100%;
  margin: 0;
  border: 0 none transparent;
  border-bottom: calc( 0.125rem / 3) solid rgb(var(--sand-text-color-rgb, 230, 230, 230), 50%);
}
:global(.neutral) .tabGroup .tab.vertical.button.selected .bg {
  /* Override TabLayout */
}
:global(.spotlight-input-key) :global(.neutral) .tabGroup .tab.vertical.button:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.neutral) .tabGroup .tab.vertical.button:global(.spottable):focus .bg {
  /* Override TabLayout */
}
:global(.spotlight-input-touch) :global(.neutral) .tabGroup .tab.vertical.button:global(.spottable):active .bg {
  /* Override TabLayout */
}
:global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .tabGroup .horizontalLine {
  width: 100%;
  margin: 0;
  border: 0 none transparent;
  border-bottom: calc( 0.125rem / 3) solid rgb(var(--sand-text-color-rgb, 230, 230, 230), 50%);
}
:global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .tabGroup .tab.vertical.button.selected .bg {
  /* Override TabLayout */
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .tabGroup .tab.vertical.button:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .tabGroup .tab.vertical.button:global(.spottable):focus .bg {
  /* Override TabLayout */
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .tabGroup .tab.vertical.button:global(.spottable):active .bg {
  /* Override TabLayout */
}
:global(.light) .tabGroup .horizontalLine {
  width: 100%;
  margin: 0;
  border: 0 none transparent;
  border-bottom: calc( 0.125rem / 3) solid rgb(var(--sand-text-color-rgb, 46, 50, 57), 50%);
}
:global(.light) .tabGroup .tab.vertical.button.selected .bg {
  /* Override TabLayout */
}
:global(.spotlight-input-key) :global(.light) .tabGroup .tab.vertical.button:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.light) .tabGroup .tab.vertical.button:global(.spottable):focus .bg {
  /* Override TabLayout */
}
:global(.spotlight-input-touch) :global(.light) .tabGroup .tab.vertical.button:global(.spottable):active .bg {
  /* Override TabLayout */
}
:global(.game) .tabGroup .horizontalLine {
  width: 100%;
  margin: 0;
  border: 0 none transparent;
  border-bottom: calc( 0.125rem / 3) solid rgb(var(--sand-text-color-rgb, 230, 230, 230), 50%);
}
:global(.game) .tabGroup .tab.vertical.button.selected .bg {
  /* Override TabLayout */
}
:global(.spotlight-input-key) :global(.game) .tabGroup .tab.vertical.button:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.game) .tabGroup .tab.vertical.button:global(.spottable):focus .bg {
  /* Override TabLayout */
}
:global(.spotlight-input-touch) :global(.game) .tabGroup .tab.vertical.button:global(.spottable):active .bg {
  /* Override TabLayout */
}
:global(.green) :global(.game) .tabGroup .horizontalLine {
  width: 100%;
  margin: 0;
  border: 0 none transparent;
  border-bottom: calc( 0.125rem / 3) solid rgb(var(--sand-text-color-rgb, 230, 230, 230), 50%);
}
:global(.green) :global(.game) .tabGroup .tab.vertical.button.selected .bg {
  /* Override TabLayout */
}
:global(.spotlight-input-key) :global(.green) :global(.game) .tabGroup .tab.vertical.button:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.green) :global(.game) .tabGroup .tab.vertical.button:global(.spottable):focus .bg {
  /* Override TabLayout */
}
:global(.spotlight-input-touch) :global(.green) :global(.game) .tabGroup .tab.vertical.button:global(.spottable):active .bg {
  /* Override TabLayout */
}
:global(.orange) :global(.game) .tabGroup .horizontalLine {
  width: 100%;
  margin: 0;
  border: 0 none transparent;
  border-bottom: calc( 0.125rem / 3) solid rgb(var(--sand-text-color-rgb, 230, 230, 230), 50%);
}
:global(.orange) :global(.game) .tabGroup .tab.vertical.button.selected .bg {
  /* Override TabLayout */
}
:global(.spotlight-input-key) :global(.orange) :global(.game) .tabGroup .tab.vertical.button:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.orange) :global(.game) .tabGroup .tab.vertical.button:global(.spottable):focus .bg {
  /* Override TabLayout */
}
:global(.spotlight-input-touch) :global(.orange) :global(.game) .tabGroup .tab.vertical.button:global(.spottable):active .bg {
  /* Override TabLayout */
}