Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d7d9e28

Browse files
committed
Adjust docs styles
1 parent 6c4c770 commit d7d9e28

File tree

4 files changed

+49
-15
lines changed

4 files changed

+49
-15
lines changed

‎docs/App.js

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import XRay from 'react-x-ray'
44
import Grid from 'react-css-grid'
55
import { Box } from 'grid-styled'
66
import Bar from './Bar'
7+
import Button from './Button'
8+
import Label from './Label'
79
import Slider from './Slider'
810
import Col from './Col'
911
import Heading from './Heading'
@@ -20,16 +22,13 @@ import Live from './Live'
2022

2123
const App = props => (
2224
<XRay disabled={!props.xray}>
23-
<Bar p={2}>
24-
<Grid width={128}>
25-
<button
26-
onClick={e => {
27-
props.update(toggleXRay)
28-
}}
29-
children='xray'
30-
/>
25+
<Bar p={1}>
26+
<Grid
27+
width={128}
28+
gap={8}
29+
align='center'>
3130
<Grid.Item span={2}>
32-
<label htmlFor='width'>width {props.width}</label>
31+
<Label htmlFor='width'>width {props.width}</Label>
3332
<Slider
3433
id='width'
3534
name='width'
@@ -39,7 +38,7 @@ const App = props => (
3938
/>
4039
</Grid.Item>
4140
<Grid.Item span={2}>
42-
<label htmlFor='width'>gap {props.gap}</label>
41+
<Label htmlFor='width'>gap {props.gap}</Label>
4342
<Slider
4443
type='range'
4544
id='gap'
@@ -49,15 +48,20 @@ const App = props => (
4948
onChange={e => props.update(handleGapChange(e.target.value))}
5049
/>
5150
</Grid.Item>
51+
<Button
52+
onClick={e => {
53+
props.update(toggleXRay)
54+
}}
55+
children='x-ray'
56+
/>
5257
</Grid>
5358
</Bar>
5459
<Box p={[ 2, 3 ]}>
5560
<Grid
5661
width={props.width}
57-
gap={props.gap}
58-
align='baseline'>
62+
gap={props.gap}>
5963
<Grid.Item>
60-
<Heading.h1>React CSS Grid</Heading.h1>
64+
<Heading.h1mb={2}>React CSS Grid</Heading.h1>
6165
<Text mb={2}>
6266
React layout component based on CSS Grid Layout and built with
6367
{' '}
@@ -85,7 +89,7 @@ const App = props => (
8589
</Flex>
8690
</Grid.Item>
8791
<div>
88-
<Heading>Install</Heading>
92+
<Headingmb={2}>Install</Heading>
8993
<Pre>npm i react-css-grid</Pre>
9094
</div>
9195
<Grid.Item>

‎docs/Button.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import styled from 'styled-components'
2+
3+
const Button = styled.button`
4+
display: inline-block;
5+
text-align: center;
6+
font-family: inherit;
7+
font-size: 10px;
8+
text-transform: uppercase;
9+
letter-spacing: 0.2em;
10+
height: 32px;
11+
border: 0;
12+
color: white;
13+
background-color: #333;
14+
border-radius: 3px;
15+
appearance: none;
16+
`
17+
18+
export default Button

‎docs/Label.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import styled from 'styled-components'
2+
3+
const Label = styled.label`
4+
display: block;
5+
width: 100%;
6+
font-size: 12px;
7+
`
8+
9+
export default Label

‎docs/Slider.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@ import styled from 'styled-components'
33
const Slider = styled.input`
44
display: block;
55
width: 100%;
6-
margin: 0;
6+
margin-top: 8px;
7+
margin-bottom: 8px;
8+
margin-left: 0;
9+
margin-right: 0;
710
height: 2px;
811
cursor: pointer;
912
color: inherit;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /