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

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

.tabLayout {
  height: 100%;
  position: relative;
}
.tabLayout.collapsed {
  /* We need a placeholder for spotlight default focus rules */
}
.tabLayout.collapsed .tabGroup .tab.vertical.button.selected .bg {
  /* Override TabLayout */
}
.tabLayout.anchorEnd,
.tabLayout.anchorRight {
  flex-direction: row-reverse;
}
:global(.enact-locale-right-to-left) .tabLayout.anchorRight {
  flex-direction: row;
}
:global(.enact-locale-right-to-left) .tabLayout.anchorLeft {
  flex-direction: row-reverse;
}
.tabLayout.horizontal .tabs {
  margin: 0 0.75rem;
}
.tabLayout.horizontal .content {
  margin-top: 2rem;
}
.tabLayout.vertical .tabs {
  transition: opacity 250ms ease-out;
  will-change: opacity;
  opacity: 1;
}
.tabLayout.vertical .tabsExpanded {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--cell-size);
  transition: opacity 250ms ease-out, transform 250ms ease-in-out;
  will-change: opacity, transform;
  transform: translateX(0);
}
.tabLayout.vertical .content {
  margin-top: 0;
  transition: transform 250ms ease-in-out;
  will-change: transform;
  transform: translateX(0);
}
.tabLayout.vertical:not(.collapsed) .tabs {
  opacity: 0;
}
.tabLayout.vertical:not(.collapsed) .tabsExpanded {
  opacity: 1;
}
.tabLayout.vertical:not(.collapsed) .content {
  transform: translateX(var(--tablayout-expand-collapse-diff));
}
.tabLayout.vertical:not(.collapsed).anchorEnd .content,
.tabLayout.vertical:not(.collapsed).anchorRight .content {
  transform: translateX(calc(var(--tablayout-expand-collapse-diff) * -1));
}
:global(.enact-locale-right-to-left) .tabLayout.vertical:not(.collapsed).anchorEnd .content {
  transform: translateX(var(--tablayout-expand-collapse-diff));
}
:global(.enact-locale-right-to-left) .tabLayout.vertical:not(.collapsed).anchorStart .content,
:global(.enact-locale-right-to-left) .tabLayout.vertical:not(.collapsed).anchorRight .content {
  transform: translateX(calc(var(--tablayout-expand-collapse-diff) * -1));
}
.tabLayout.vertical.collapsed .tabsExpanded {
  opacity: 0;
  transform: translateX(calc(var(--tablayout-expand-collapse-diff) * -1));
  pointer-events: none;
}
.tabLayout.vertical.collapsed.anchorEnd .tabsExpanded,
.tabLayout.vertical.collapsed.anchorRight .tabsExpanded {
  transform: translateX(var(--tablayout-expand-collapse-diff));
}
:global(.enact-locale-right-to-left) .tabLayout.vertical.collapsed.anchorEnd .tabsExpanded {
  transform: translateX(calc(var(--tablayout-expand-collapse-diff) * -1));
}
:global(.enact-locale-right-to-left) .tabLayout.vertical.collapsed.anchorStart .tabsExpanded,
:global(.enact-locale-right-to-left) .tabLayout.vertical.collapsed.anchorRight .tabsExpanded {
  transform: translateX(var(--tablayout-expand-collapse-diff));
}
.tabLayout .tabGroup .tab.vertical.button.selected .bg {
  /* Override TabLayout */
}
:global(.spotlight-input-key) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):focus .bg {
  /* Override TabLayout */
}
:global(.spotlight-input-touch) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):active .bg {
  /* Override TabLayout */
}