Merge pull request #196 from dabapps/nav-bar-variables

Nav bar variables

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.8.31",
+  "version": "0.8.32",
   "description": "A Collection of React Components for Project Development",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",

src/less/nav-bar.less

@@ -10,6 +10,11 @@ body.with-fixed-nav-bar {
   box-shadow: @shadow-hard;
   height: @nav-bar-height;
   transition: ease-in-out 0.2s transform, ease-in-out 0.2s box-shadow;
+  color: @nav-bar-text-color;
+
+  a {
+    color: @nav-bar-link-color;
+  }
 
   &.no-shaddow {
     box-shadow: @shadow-none;

src/less/variables.less

@@ -63,6 +63,8 @@
 
 @container-background: @white;
 
+@nav-bar-text-color: @font-color-base;
+@nav-bar-link-color: @link-color;
 @nav-bar-background: @body-background;
 @nav-bar-border: @border-base;
 @nav-bar-height: @input-height + @padding-base * 2;

src/ts/components/navigation/nav-bar.examples.md

@@ -20,6 +20,12 @@ class NavBarExample extends React.Component {
         <NavBar fixed={type === 'fixed'} shy={type === 'shy'}>
           <Column>
             <SpacedGroup>
+              <h1 className="font-size-large display-inline">
+                Title
+              </h1>
+              <a>
+                Link
+              </a>
               <Button>
                 Home
               </Button>
@@ -65,6 +71,8 @@ class NavBarExample extends React.Component {
 #### Less variables
 
 ```less
+@nav-bar-text-color: @font-color-base; // @grey-dark
+@nav-bar-link-color: @link-color;
 @nav-bar-background: @body-background; // @white;
 @nav-bar-border: @border-base;
 @nav-bar-height: @input-height + @padding-base * 2;