[MIRROR] TGUI Stack Zebra Mode [MDB IGNORE](#1020)

* TGUI Stack Zebra Mode (#79972) --------- Co-authored-by: SkyratBot <[email protected]> Co-authored-by: ZeWaka <[email protected]> Co-authored-by: oranges <email@ oranges.net.nz>
Fluffy-Frontier · Dec 7, 2023 · cc7479b · cc7479b
1 parent b373e96
commit cc7479b
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git 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 (
     <div
       className={classes([
         'Stack',
         fill && 'Stack--fill',
         vertical ? 'Stack--vertical' : 'Stack--horizontal',
+        zebra && 'Stack--zebra',
         className,
         computeFlexClassName(props),
       ])}

diff --git a/tgui/packages/tgui/stories/Stack.stories.jsx b/tgui/packages/tgui/stories/Stack.stories.jsx
@@ -35,7 +35,7 @@ const Story = (props) => {
       <Stack fill className="debug-layout">
         <SmallStackItems />
         <Stack.Item grow={1}>
-          <Stack fill vertical>
+          <Stack fill vertical zebra>
             <SmallStackItems />
             <Stack.Item>
               <Stack fill>

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