Navigation

react-toolbox · Jul 29, 2015 · 7c9ef1e · 7c9ef1e
1 parent 0b45fca
commit 7c9ef1e
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 33 deletions.
diff --git a/components/navigation/index.cjsx b/components/navigation/index.cjsx
@@ -1,7 +1,6 @@
-require './style'
-# -- Components
-Button  = require '../button'
-Link    = require '../link'
+localCSS  = require './style'
+Button    = require '../button'
+Link      = require '../link'
 
 module.exports = React.createClass
 
@@ -13,13 +12,17 @@ module.exports = React.createClass
     type        : React.PropTypes.string
 
   getDefaultProps: ->
-    type        : "default"
-    routes      : []
     actions     : []
+    className   : ''
+    type        : 'default'
+    routes      : []
 
   # -- Render
   render: ->
-    <nav data-component-navigation={@props.type}>
+    className  = "#{localCSS.root} #{@props.className}"
+    className += " #{@props.type}"  if @props.type
+
+    <nav data-react-toolbox='navigation' className={className}>
       { <Link key={index} {...route} /> for route, index in @props.routes }
       { <Button key={index} {...action} /> for action, index in @props.actions }
       { @props.children }

diff --git a/components/navigation/style.styl b/components/navigation/style.styl
@@ -1,28 +1,29 @@
-@import "../constants.styl"
+@import '../constants'
 
-[data-component-navigation="horizontal"]
-  > *
-    display                         : inline-block
-    margin-right                    : SPACE
-    color                           : WHITE
-    font-size                       : FONT_SIZE_SMALL
-    font-weight                     : FONT_WEIGHT_NORMAL !important
-    > small
-      margin-left                   : SIZE = (SPACE / 5)
-      padding                       : 0 SIZE
-      font-weight                   : FONT_WEIGHT_BOLD
-      color                         : BACKGROUND_DARK
-      background-color              : WHITE
-      border-radius                 : SIZE
+:local(.root)
+  &.horizontal
+    > *
+      display                         : inline-block
+      margin-right                    : SPACE
+      color                           : WHITE
+      font-size                       : FONT_SIZE_SMALL
+      font-weight                     : FONT_WEIGHT_NORMAL !important
+      > small
+        margin-left                   : SIZE = (SPACE / 5)
+        padding                       : 0 SIZE
+        font-weight                   : FONT_WEIGHT_BOLD
+        color                         : BACKGROUND_DARK
+        background-color              : WHITE
+        border-radius                 : SIZE
 
-[data-component-navigation="vertical"]
-  > *
-    display                         : block
-    padding                         : 0 SPACE
-    line-height                     : UNIT
-    transition-property               box-shadow, opacity
-    &.active
-      box-shadow                      inset MENU_WIDTH 0 BACKGROUND
-    > small
-      float                         : right
-      opacity                       : 0.5
+  &.vertical
+    > *
+      display                         : block
+      padding                         : 0 SPACE
+      line-height                     : UNIT
+      transition-property               box-shadow, opacity
+      &.active
+        box-shadow                      inset MENU_WIDTH 0 BACKGROUND
+      > small
+        float                         : right
+        opacity                       : 0.5