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

Fix Flex margin bug and add examples

Browse Source
This commit is contained in:
Chi Vinh Le
2018-07-19 21:02:16 -03:00
parent 5e64961347
commit 7f265a93c8
2 changed files with 38 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/ui/components/Flex/Flex.css
+18 -18
View File
@@ -7,49 +7,49 @@
.halfItemGutter {
& > * {
margin: 0 calc(0.5 * var(--spacing-unit)) 0 0;
margin: 0 calc(0.5 * var(--spacing-unit)) 0 0 !important;
}
&.directionRowReverse {
& > * {
margin: 0 0 0 calc(0.5 * var(--spacing-unit));
margin: 0 0 0 calc(0.5 * var(--spacing-unit)) !important;
}
}
&.directionColumn {
& > * {
margin: 0 0 calc(0.5 * var(--spacing-unit)) 0;
margin: 0 0 calc(0.5 * var(--spacing-unit)) 0 !important;
}
}
&.directionColumnReverese {
& > * {
margin: calc(0.5 * var(--spacing-unit)) 0 0 0;
margin: calc(0.5 * var(--spacing-unit)) 0 0 0 !important;
}
}
& > *:last-child {
margin: 0;
margin: 0 !important;
}
}
.itemGutter {
& > * {
margin: 0 var(--spacing-unit) 0 0;
margin: 0 var(--spacing-unit) 0 0 !important;
}
&.directionRowReverse {
& > * {
margin: 0 0 0 var(--spacing-unit);
margin: 0 0 0 var(--spacing-unit) !important;
}
}
&.directionColumn {
& > * {
margin: 0 0 var(--spacing-unit) 0;
margin: 0 0 var(--spacing-unit) 0 !important;
}
}
&.directionColumnReverese {
& > * {
margin: var(--spacing-unit) 0 0 0;
margin: var(--spacing-unit) 0 0 0 !important;
}
}
& > *:last-child {
margin: 0;
margin: 0 !important;
}
}
@@ -65,35 +65,35 @@
.wrapReverse {
&.itemGutter {
&:not(:empty) {
margin-top: calc(-1 * var(--spacing-unit));
margin-top: calc(-1 * var(--spacing-unit)) !important;
}
& > * {
margin-top: var(--spacing-unit);
margin-top: var(--spacing-unit) !important;
}
}
&.directionColumn.itemGutter {
&:not(:empty) {
margin-left: calc(-1 * var(--spacing-unit));
margin-left: calc(-1 * var(--spacing-unit)) !important;
}
&.itemGutter > * {
margin-left: var(--spacing-unit);
margin-left: var(--spacing-unit) !important;
}
}
&.halfItemGutter {
&:not(:empty) {
margin-top: calc(-0.5 * var(--spacing-unit));
margin-top: calc(-0.5 * var(--spacing-unit)) !important;
}
& > * {
margin-top: calc(0.5 * var(--spacing-unit));
margin-top: calc(0.5 * var(--spacing-unit)) !important;
}
}
&.directionColumn.halfItemGutter {
&:not(:empty) {
margin-left: calc(-0.5 * var(--spacing-unit));
margin-left: calc(-0.5 * var(--spacing-unit)) !important;
}
&.halfItemGutter > * {
margin-left: calc(0.5 * var(--spacing-unit));
margin-left: calc(0.5 * var(--spacing-unit)) !important;
}
}
}
src/core/client/ui/components/Flex/Flex.mdx
+20 -1
View File
@@ -5,12 +5,31 @@ menu: UI Kit
import { Playground, PropsTable } from 'docz'
import Flex from './Flex'
import Button from '../Button'
# Flex
`Flex` is a wrapper around `flexbox`.
## Basic usage
## Justify content
<Playground>
<Flex justifyContent="center">I'm centered</Flex>
</Playground>
## Align items
<Playground>
<Flex alignItems="center" itemGutter>
<Button variant="filled">Push Me</Button>
<Button variant="filled" size="small">Push Me</Button>
<Button variant="filled" size="large">Push Me</Button>
</Flex>
</Playground>
## Direction
<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>