mirror of
https://github.com/c8r/x0.git
synced 2024-09-11 13:45:52 +03:00
Adjust Library grid styles
This commit is contained in:
parent
1be2edf1a3
commit
531facc2a1
@ -1,24 +1,17 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import { style, borderColor } from 'styled-system'
|
import {
|
||||||
|
style,
|
||||||
|
gridGap,
|
||||||
|
gridAutoRows,
|
||||||
|
borderColor
|
||||||
|
} from 'styled-system'
|
||||||
|
|
||||||
const gridWidth = style({
|
const gridWidth = style({
|
||||||
prop: 'width',
|
prop: 'width',
|
||||||
cssProperty: 'gridTemplateColumns',
|
cssProperty: 'gridTemplateColumns',
|
||||||
getter: n => `repeat(auto-fit, minmax(${n}, 1fr))`
|
getter: n => `repeat(auto-fit, minmax(${n}px, 1fr))`
|
||||||
})
|
|
||||||
|
|
||||||
const gridGap = style({
|
|
||||||
prop: 'gap',
|
|
||||||
cssProperty: 'gridGap',
|
|
||||||
numberToPx: true
|
|
||||||
})
|
|
||||||
|
|
||||||
const gridHeight = style({
|
|
||||||
prop: 'height',
|
|
||||||
cssProperty: 'gridAutoRows',
|
|
||||||
numberToPx: true
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const Grid = styled.div([], {
|
const Grid = styled.div([], {
|
||||||
@ -26,12 +19,12 @@ const Grid = styled.div([], {
|
|||||||
},
|
},
|
||||||
gridWidth,
|
gridWidth,
|
||||||
gridGap,
|
gridGap,
|
||||||
gridHeight
|
gridAutoRows
|
||||||
)
|
)
|
||||||
|
|
||||||
Grid.defaultProps = {
|
Grid.defaultProps = {
|
||||||
width: '256px',
|
width: 256,
|
||||||
height: 192
|
gridAutoRows: 192
|
||||||
}
|
}
|
||||||
|
|
||||||
const Card = styled(Link)([], {
|
const Card = styled(Link)([], {
|
||||||
|
@ -66,9 +66,8 @@ Generated by [AVA](https://ava.li).
|
|||||||
> Snapshot 1
|
> Snapshot 1
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="sc-bbmXgH hCNAIb"
|
className="sc-bbmXgH kzGbIY"
|
||||||
height={192}
|
width={256}
|
||||||
width="256px"
|
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
borderColor="gray"
|
borderColor="gray"
|
||||||
|
Binary file not shown.
Loading…
Reference in New Issue
Block a user