diff --git a/docs/app/components/layout/main/components/appbar.jsx b/docs/app/components/layout/main/components/appbar.jsx
index 9c75628c..a514cb36 100644
--- a/docs/app/components/layout/main/components/appbar.jsx
+++ b/docs/app/components/layout/main/components/appbar.jsx
@@ -3,19 +3,19 @@ import { AppBar, Button } from 'react-toolbox';
import { Link } from 'react-router';
import Logo from '../../../logo';
import Navigation from '../../../navigation';
-import PlaygroundArea from '../playground_area';
+// import PlaygroundArea from '../playground_area';
import style from './appbar.scss';
class MainAppBar extends React.Component {
handlerPlayGroundClick = () => {
- this.refs.playground.show();
+ // this.refs.playground.show();
}
render () {
return (
-
- React Toolbox
+
+
-
);
}
diff --git a/docs/app/components/layout/main/components/appbar.scss b/docs/app/components/layout/main/components/appbar.scss
index 3df81881..e382ba33 100644
--- a/docs/app/components/layout/main/components/appbar.scss
+++ b/docs/app/components/layout/main/components/appbar.scss
@@ -1,42 +1,27 @@
@import "../../../globals";
@import "~react-toolbox/app_bar/config";
@import "~react-toolbox/button/config";
-
-$appbar-brand-height: 2 * $unit;
-$appbar-brand-v-padding: ($appbar-height - $appbar-brand-height) / 2;
-$appbar-brand-logo-size: $appbar-height - 2.6 * $unit;
-$appbar-shadow: 0 1px rgba(255,255,255,0.75);
+$appbar-height: 11.2 * $unit;
+$appbar-logo-size: 3.6 * $unit;
+$appbar-shadow: 0 1px rgba(255,255,255,.75);
.appbar {
- composes: root from "sass!react-toolbox/app_bar/style";
+ display: flex;
+ min-height: $appbar-height;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-end;
background: $color-primary-dark;
box-shadow: $appbar-shadow;
}
-.brand {
- @include typo-title;
- position: relative;
- display: inline-block;
- padding-top: $appbar-brand-v-padding;
- padding-bottom: $appbar-brand-v-padding;
- padding-left: $appbar-title-distance;
- font-weight: 400;
- color: $color-primary-contrast;
- > .logo {
- position: absolute;
- top: 50%;
- left: 0;
- width: $appbar-brand-logo-size;
- height: $appbar-brand-logo-size;
- margin-top: - $appbar-brand-logo-size / 2;
- fill: $color-primary-contrast;
- }
+.logo {
+ width: $appbar-logo-size;
+ height: $appbar-logo-size;
+ fill: $color-primary-contrast;
}
.navigation {
- flex-grow: 1;
- padding-right: $button-floating-height;
- text-align: right;
> ul {
list-style: none;
> li {
@@ -44,7 +29,8 @@ $appbar-shadow: 0 1px rgba(255,255,255,0.75);
> a {
@include typo-menu;
display: inline-block;
- padding: 2.5 * $unit $appbar-h-padding;
+ margin-right: $appbar-h-padding;
+ line-height: $appbar-height / 2;
color: $color-primary-contrast;
}
}
diff --git a/docs/app/components/layout/main/components/documentation.scss b/docs/app/components/layout/main/components/documentation.scss
index c08ed40c..460bcb8e 100644
--- a/docs/app/components/layout/main/components/documentation.scss
+++ b/docs/app/components/layout/main/components/documentation.scss
@@ -1,4 +1,4 @@
-@import "../../globals";
+@import "../../../globals";
$documentation-h1-size: 3.4 * $unit;
$documentation-h2-size: 2.4 * $unit;
diff --git a/docs/app/components/layout/main/style.scss b/docs/app/components/layout/main/style.scss
index 4a716954..e32ece9a 100644
--- a/docs/app/components/layout/main/style.scss
+++ b/docs/app/components/layout/main/style.scss
@@ -1,6 +1,7 @@
@import "../../globals";
@import "~react-toolbox/app_bar/config";
+$appbar-height: 11.2 * $unit;
.content {
display: flex;
max-height: 100vh;
diff --git a/docs/app/components/navigation/index.jsx b/docs/app/components/navigation/index.jsx
index 5a1023f6..7e2239f8 100644
--- a/docs/app/components/navigation/index.jsx
+++ b/docs/app/components/navigation/index.jsx
@@ -5,8 +5,8 @@ const Navigation = (props) => {
return (