Aside

components/aside/index.cjsx

@@ -1,4 +1,4 @@
-require './style'
+localCSS = require './style'
 
 module.exports = React.createClass
 
@@ -10,8 +10,8 @@ module.exports = React.createClass
     type        : React.PropTypes.string
 
   getDefaultProps: ->
-    className   : ""
-    type        : "left"
+    className   : ''
+    type        : 'left'
 
   getInitialState: ->
     active      : @props.active
@@ -22,10 +22,11 @@ module.exports = React.createClass
 
   # -- Render
   render: ->
-    className = @props.className
-    className += " active" if @state.active
-    className += " hideable" if @props.hideable
-    <div data-component-aside={@props.type} className={className} onClick={@onClick}>
+    className  = "#{localCSS.root} #{@props.className}"
+    className += " #{@props.type}"  if @props.type
+    className += ' hideable'        if @props.hideable
+    className += ' active'          if @state.active
+    <div data-react-toolbox='aside' className={className} onClick={@onClick}>
       <aside>
         { @props.children }
       </aside>

components/aside/style.styl

@@ -1,6 +1,7 @@
-@import "../constants.styl"
+@import "../constants"
 
-[data-component-aside]
+WIDTH = (4 * UNIT)
+:local(.root)
   z-index                         : 2
   position                        : fixed
   top                             : 0
@@ -16,13 +17,13 @@
     position                      : absolute
     top                           : 0
     height                        : 100%
-    width                         : (4 * UNIT)
+    width                         : WIDTH
     background-color              : WHITE
     transition-property             transform
     transition-duration             ANIMATION_DURATION
     transition-timing-function      ANIMATION_EASE
 
-  // -- Style
+  // -- Override
   &.active
     pointer-events                : all
     > *
@@ -30,20 +31,18 @@
       transform                     translateX(0%)
   &:not(.hideable)
     z-index                       : 2
-    width                         : (4 * UNIT)
+    width                         : WIDTH
   &.hideable
     z-index                       : 3
     &.active
       background-color            : rgba(0,0,0,0.5)
-
-[data-component-aside="left"]
-  left                            : 0
-  > *
-    left                          : 0
-    transform                       translateX(-100%)
-
-[data-component-aside="right"]
-  right                           : 0
-  > *
-    right                         : 0
-    transform                       translateX(100%)
+  &.left
+    left                            : 0
+    > *
+      left                          : 0
+      transform                       translateX(-100%)
+  &.right
+    right                           : 0
+    > *
+      right                         : 0
+      transform                       translateX(100%)