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;
}