diff --git a/tgui/packages/tgui/components/Stack.tsx b/tgui/packages/tgui/components/Stack.tsx index 9abf13e651b..4d0ab75cab5 100644 --- a/tgui/packages/tgui/components/Stack.tsx +++ b/tgui/packages/tgui/components/Stack.tsx @@ -11,16 +11,18 @@ import { computeFlexClassName, computeFlexItemClassName, computeFlexItemProps, c type StackProps = FlexProps & { vertical?: boolean; fill?: boolean; + zebra?: boolean; }; export const Stack = (props: StackProps) => { - const { className, vertical, fill, ...rest } = props; + const { className, vertical, fill, zebra, ...rest } = props; return (
{ - + diff --git a/tgui/packages/tgui/styles/components/Stack.scss b/tgui/packages/tgui/styles/components/Stack.scss index ab2c6f24931..02d0e8bbe24 100644 --- a/tgui/packages/tgui/styles/components/Stack.scss +++ b/tgui/packages/tgui/styles/components/Stack.scss @@ -6,6 +6,8 @@ @use '../base.scss'; @use './Divider.scss'; +$zebra-background-color: base.$color-bg-section !default; + .Stack--fill { height: 100%; } @@ -26,6 +28,10 @@ } } +.Stack--zebra > .Stack__item:nth-child(even) { + background-color: $zebra-background-color; +} + .Stack--horizontal > .Stack__divider:not(.Stack__divider--hidden) { border-left: Divider.$thickness solid Divider.$color; }