DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Toolbar design

Browse Source 
Reviewed By: danielbuechele

Differential Revision: D6964901

fbshipit-source-id: c052449d0ae3da91bec64c8f9da867244022ccf1
This commit is contained in:
Emil Sjölander
2018-02-12 10:27:12 -08:00
committed by Facebook Github Bot
parent 951a429ac5
commit 9e0f751464
4 changed files with 16 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
website/src/components/Page.css
View File

@@ -1,14 +1,20 @@
@import url('https://fonts.googleapis.com/css?family=Barlow'); @import url('https://fonts.googleapis.com/css?family=Open+Sans|Source+Code+Pro');
html, html,
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Barlow', sans-serif; font-family: 'Open Sans', sans-serif;
color: #303845; color: #303845;
font-size: 16px; font-size: 16px;
} }
code,
pre {
font-family: 'Source Code Pro', monospace;
}
h1, h1,
h2 { h2 {
font-weight: 500; font-weight: 500;

8
website/src/components/Page.js
View File

@@ -25,14 +25,6 @@ type Props = {|
export default (props: Props) => ( export default (props: Props) => (
<div className={`Page ${props.className || ''}`}> <div className={`Page ${props.className || ''}`}>
{/* <Head>
<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/antd/3.2.0/antd.min.css"
/>
<link href="//fonts.googleapis.com/css?family=Barlow" rel="stylesheet" />
<title>Yoga Layout{props.title ? ` | ${props.title}` : ''}</title>
</Head> */}
<Toolbar /> <Toolbar />
<div className={`PageContent ${props.withSpacing ? 'withSpacing' : ''}`}> <div className={`PageContent ${props.withSpacing ? 'withSpacing' : ''}`}>
{props.children} {props.children}

25
website/src/components/Toolbar.css
View File

@@ -1,37 +1,24 @@
.Toolbar { .Toolbar {
border-bottom: 1px solid #dddfe2;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
background: white;
height: 50px;
padding: 0 10px;
padding-bottom: 1px;
z-index: 4;
display: flex; display: flex;
padding: 20px 15px;
z-index: 4;
align-items: center; align-items: center;
background-color: white;
} }
.Toolbar .logo { .Toolbar .logo {
display: flex; display: flex;
height: 100%;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
margin-left: 5px;
} }
.Toolbar a { .Toolbar a {
margin: 0 15px; margin: 0 15px;
color: #606770;
} }
.Toolbar h1 { .Toolbar a:hover {
font-size: 20px; color: #8FD0C6;
margin: 0;
padding: 0;
margin-left: 3px;
white-space: nowrap;
}
.Toolbar .ToolbarSpacer {
flex-grow: 1;
} }
.Toolbar .ToolbarToggle { .Toolbar .ToolbarToggle {

4
website/src/components/Toolbar.js
View File

@@ -29,12 +29,12 @@ export default class Toolbar extends Component<Props> {
width="42" width="42"
alt="Yoga logo" alt="Yoga logo"
/> />
<h1>Yoga Layout</h1>
</Link> </Link>
<div className="ToolbarSpacer" />
<Link to="/docs">Docs</Link> <Link to="/docs">Docs</Link>
<Link to="/playground">Playground</Link> <Link to="/playground">Playground</Link>
<a href="https://github.com/facebook/yoga">GitHub</a> <a href="https://github.com/facebook/yoga">GitHub</a>
{this.props.onShowCode && ( {this.props.onShowCode && (
<a className="ToolbarToggle" onClick={this.props.onShowCode}> <a className="ToolbarToggle" onClick={this.props.onShowCode}>
<Icon type={'code-o'} /> <Icon type={'code-o'} />