wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-08-16 11:29:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Support double itemGutters

Browse Source
This commit is contained in:
Chi Vinh Le
2018-08-09 18:42:16 +02:00
parent 04f03b7f3b
commit 3f64a0d1a6
3 changed files with 69 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/ui/components/Flex/Flex.css
+41
View File
@@ -31,6 +31,30 @@
}
}
.doubleItemGutter {
& > * {
margin: 0 calc(2 * var(--spacing-unit)) 0 0 !important;
}
&.directionRowReverse {
& > * {
margin: 0 0 0 calc(2 * var(--spacing-unit)) !important;
}
}
&.directionColumn {
& > * {
margin: 0 0 calc(2 * var(--spacing-unit)) 0 !important;
}
}
&.directionColumnReverese {
& > * {
margin: calc(2 * var(--spacing-unit)) 0 0 0 !important;
}
}
& > *:last-child {
margin: 0 !important;
}
}
.itemGutter {
& > * {
margin: 0 var(--spacing-unit) 0 0 !important;
@@ -98,6 +122,23 @@
margin-left: calc(0.5 * var(--spacing-unit)) !important;
}
}
&:not(.directionColumn).doubleItemGutter {
&:not(:empty) {
margin-top: calc(-2 * var(--spacing-unit)) !important;
}
& > * {
margin-top: calc(2 * var(--spacing-unit)) !important;
}
}
&.directionColumn.doubleItemGutter {
&:not(:empty) {
margin-left: calc(-2 * var(--spacing-unit)) !important;
}
&.doubleItemGutter > * {
margin-left: calc(2 * var(--spacing-unit)) !important;
}
}
}
.justifyFlexStart {
src/core/client/ui/components/Flex/Flex.mdx
+26
View File
@@ -33,3 +33,29 @@ import Button from '../Button'
<Button variant="filled">Push Me</Button>
</Flex>
</Playground>
## Item Gutter
<Playground>
<Flex direction="column" itemGutter>
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
</Flex>
</Playground>
<Playground>
<Flex direction="column" itemGutter="half">
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
</Flex>
</Playground>
<Playground>
<Flex direction="column" itemGutter="double">
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
</Flex>
</Playground>
src/core/client/ui/components/Flex/Flex.tsx
+2 -1
View File
@@ -25,7 +25,7 @@ interface InnerProps {
| "space-evenly";
alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
direction?: "row" | "column" | "row-reverse" | "column-reverse";
itemGutter?: boolean | "half";
itemGutter?: boolean | "half" | "double";
className?: string;
wrap?: boolean | "reverse";
@@ -56,6 +56,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
const classObject: Record<string, boolean> = {
[classes.itemGutter]: itemGutter === true,
[classes.halfItemGutter]: itemGutter === "half",
[classes.doubleItemGutter]: itemGutter === "double",
[classes.wrap]: wrap === true,
[classes.wrapReverse]: wrap === "reverse",
};