Merge pull request #5 from Financial-Times/fixes

Small fixes like fonts, new o-colors

bower.json

@@ -8,8 +8,8 @@
   "dependencies": {
     "o-grid": "^2.0.7",
     "o-colors": "^2.2.20",
-    "o-fonts": ">=0.7.0 <2",
-    "o-ft-icons": "^1.2.3",
+    "o-fonts": ">=1.4.0 <2",
+    "o-ft-icons": "^1.2.4",
     "o-assets": "^0.4.0",
     "o-hoverable": "^0.1.1",
     "o-useragent": "^1.1.0",

demos/src/scss/demo.scss

@@ -1,3 +1,4 @@
+$o-fonts-path: 'http://build.origami.ft.com/files/[email protected]/';
 @import "../../../main";
 
 .demo__title {

readme.md

@@ -71,6 +71,8 @@ __Horizontal navigation__ styles use [o-squishy-list](https://github.com/Financi
 
 __o-squishy-list__ will show as many items has will fit in the available width. If not everything will fit, then the necessary number of items will be hidden, starting with the lowest priority items.
 
+If you don't want to use a responsive horizontal navigation, you can require [Nav.js](https://github.com/Financial-Times/o-hierarchical-nav/blob/master/src/js/Nav.js) directly.
+
 ### Hidden navigation items
 
 A 'More' item may be added to the top level which will be populated with a list of elements that have been hidden by __o-squishy-list__:

src/scss/nav-base.scss

@@ -1,7 +1,8 @@
 @include oFtIconsFontFace();
+@include oFontsInclude(BentonSans, normal);
 
 .o-hierarchical-nav {
-    font-family: sans-serif;
+    font-family: oFontsGetFontFamilyWithFallbacks(BentonSans);
     white-space: nowrap;
     ul {
         margin: 0;
@@ -19,7 +20,6 @@
             color: oColorsGetColorFor(link-alt-hover, text);                
         }
     }
-
 
 
     [data-o-hierarchical-nav-level] {
@@ -46,13 +46,13 @@
         }
     }
 
-    i {
-        @include oFtIconsBaseIconStyles();
-    }
-
     [aria-controls] > a,
     .o-hierarchical-nav__parent > a {
 
+        i {
+            @include oFtIconsBaseIconStyles();
+        }
+
         .o-hierarchical-nav__parent__down-arrow {
             @extend %o-ft-icons-icon--down-arrow;
             font-size: 8px;

src/scss/theme-horizontal.scss

@@ -29,7 +29,7 @@
         border-right: $_o-hierarchical-nav-dropdown-border;
         border-bottom: $_o-hierarchical-nav-dropdown-border;
         border-left: $_o-hierarchical-nav-dropdown-border;
-        background-color: _oColorsGetPaletteColor(grey-tint5);
+        background-color: oColorsGetPaletteColor(grey-tint5);
         position: absolute;
 
         & > .o-hierarchical-nav__parent.o-hierarchical-nav__outside-right [data-o-hierarchical-nav-level='3'] {
@@ -40,7 +40,7 @@
     }
 
     [data-o-hierarchical-nav-level='3'] {
-        background-color: _oColorsGetPaletteColor(grey-tint4);
+        background-color: oColorsGetPaletteColor(grey-tint4);
     }
 
     .hierarchical-nav__outside-right > [data-o-hierarchical-nav-level] {
@@ -65,12 +65,12 @@
         position: absolute;
         right: 0;
         left: 0;
-        border-top: 20px solid _oColorsGetPaletteColor(pink-tint2);
+        border-top: 20px solid oColorsGetPaletteColor(pink-tint2);
         padding: 15px 33px;
         min-height: 100px;
         width: 100%;
         color: #333;
-        background-color: _oColorsGetPaletteColor(pink-tint1);
+        background-color: oColorsGetPaletteColor(pink-tint1);
         z-index: $_o-hierarchical-nav-mega-dropdown-zindex;
     }