Sitelet https://github.com/developit/preact-compat-example/commit/06a32c7fa10416cf27bf8e0b07c760be8705c9f5
Skip to content

Commit 06a32c7

Browse files
developitdevelopit
committed
Initial commit of demo, originally forked from https://github.com/react-toolbox/react-toolbox-example 
1 parent ad1b7bf commit 06a32c7

5 files changed

Lines changed: 65 additions & 0 deletions

File tree

‎src/components/header.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import style from './style';
3+
4+
// require components separated to get in the build
5+
// just what you are using
6+
import AppBar from 'react-toolbox/lib/app_bar';
7+
import Button from 'react-toolbox/lib/button';
8+
9+
const MainAppBar = (props) => {
10+
return (
11+
<AppBar className={style.appbar} flat>
12+
<h1 className={style.title}>React Toolbox Example</h1>
13+
<Button className={style.button} kind="floating" icon="add" accent/>
14+
</AppBar>
15+
);
16+
};
17+
18+
export default MainAppBar;

‎src/components/style.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@import "~react-toolbox/lib/commons";
2+
@import "~react-toolbox/lib/app_bar/config";
3+
@import "~react-toolbox/lib/button/config";
4+
5+
$title-font-size: 1.8 * $unit;
6+
7+
// You need to boost priority more than the minimum since
8+
// your build comes with React Toolbox's and we can't
9+
// ensure the order. You can either set a wrapper or target
10+
// React Toolbox data attributes to boost
11+
.appbar {
12+
> .title {
13+
font-size: $title-font-size;
14+
font-weight: $font-weight-bold;
15+
position: relative;
16+
}
17+
18+
> .button {
19+
position: absolute;
20+
top: $appbar-height - ($button-floating-height / 2);
21+
right: $button-floating-height / 2;
22+
z-index: $z-index-higher;
23+
}
24+
}

‎src/index.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import Header from './components/header';
4+
import style from './style';
5+
6+
7+
ReactDOM.render((
8+
<div id="app">
9+
<div>
10+
<Header />
11+
<section className={style.content}>
12+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.
13+
</section>
14+
</div>
15+
</div>
16+
), document.body);

‎src/style.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "~react-toolbox/lib/commons";
2+
3+
.content {
4+
padding: $unit;
5+
}

‎src/toolbox-theme.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
$color-primary: $palette-blue-500 !default;
2+
$color-primary-dark: $palette-blue-700 !default;

0 commit comments

Comments
 (0)