feat(instances): adjust cards padding for xs screens
This commit is contained in:
parent
f356ee267c
commit
f23c2386fe
|
@ -21,7 +21,7 @@ import { Saved as SavedIcon, Error as ErrorIcon } from './status-icon';
|
||||||
|
|
||||||
import { QueryBreakpoints } from 'joyent-ui-toolkit';
|
import { QueryBreakpoints } from 'joyent-ui-toolkit';
|
||||||
|
|
||||||
const { Medium } = QueryBreakpoints;
|
const { SmallOnly, Medium } = QueryBreakpoints;
|
||||||
|
|
||||||
const Card = styled(BaseCard)`
|
const Card = styled(BaseCard)`
|
||||||
${is('error')`
|
${is('error')`
|
||||||
|
@ -176,7 +176,12 @@ export default class Step extends PureComponent {
|
||||||
>
|
>
|
||||||
<Card expanded={expanded} error={!expanded && !isValid}>
|
<Card expanded={expanded} error={!expanded && !isValid}>
|
||||||
<CardOutlet>
|
<CardOutlet>
|
||||||
<Padding all="5">{children}</Padding>
|
<SmallOnly>
|
||||||
|
<Padding all="3">{children}</Padding>
|
||||||
|
</SmallOnly>
|
||||||
|
<Medium>
|
||||||
|
<Padding all="5">{children}</Padding>
|
||||||
|
</Medium>
|
||||||
</CardOutlet>
|
</CardOutlet>
|
||||||
</Card>
|
</Card>
|
||||||
</Broadcast>
|
</Broadcast>
|
||||||
|
|
Loading…
Reference in New Issue