Improved localCSS for array

react-toolbox · Jul 28, 2015 · b35e34e · b35e34e
1 parent 3d68797
commit b35e34e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 29 deletions.
diff --git a/components/aside/index.cjsx b/components/aside/index.cjsx
@@ -27,7 +27,7 @@ module.exports = React.createClass
     className += ' hideable'        if @props.hideable
     className += ' active'          if @state.active
     <div data-react-toolbox='aside' className={className} onClick={@onClick}>
-      <aside>
+      <aside className={localCSS.container}>
         { @props.children }
       </aside>
     </div>

diff --git a/components/aside/style.styl b/components/aside/style.styl
@@ -1,34 +1,29 @@
 @import "../constants"
 
 WIDTH = (4 * UNIT)
+
+:local(.container)
+  position                        : absolute
+  top                             : 0
+  height                          : 100%
+  width                           : WIDTH
+  background-color                : WHITE
+  transition-property             : transform
+  transition-duration             : ANIMATION_DURATION
+  transition-timing-function      : ANIMATION_EASE
+
 :local(.root)
   z-index                         : 2
   position                        : fixed
   top                             : 0
   width                           : 100vw
   height                          : 100vh
   pointer-events                  : none
-  transition-property               background-color
-  transition-duration               ANIMATION_DURATION
-  transition-timing-function        ANIMATION_EASE
+  transition-property             : background-color
+  transition-duration             : ANIMATION_DURATION
+  transition-timing-function      : ANIMATION_EASE
 
-  // -- Children
-  > *
-    position                      : absolute
-    top                           : 0
-    height                        : 100%
-    width                         : WIDTH
-    background-color              : WHITE
-    transition-property             transform
-    transition-duration             ANIMATION_DURATION
-    transition-timing-function      ANIMATION_EASE
-
-  // -- Override
-  &.active
-    pointer-events                : all
-    > *
-      box-shadow                  : ZDEPTH_SHADOW_1
-      transform                     translateX(0%)
+  // -- Overrides
   &:not(.hideable)
     z-index                       : 2
     width                         : WIDTH
@@ -37,12 +32,17 @@ WIDTH = (4 * UNIT)
     &.active
       background-color            : rgba(0,0,0,0.5)
   &.left
-    left                            : 0
-    > *
-      left                          : 0
-      transform                       translateX(-100%)
+    left                          : 0
+    &:not(.active) > :local(.container)
+      left                        : 0
+      transform                   : translateX(-100%)
   &.right
-    right                           : 0
-    > *
-      right                         : 0
-      transform                       translateX(100%)
+    right                         : 0
+    &:not(.active) > :local(.container)
+      right                       : 0
+      transform                   : translateX(100%)
+  &.active
+    pointer-events                : all
+    > :local(.container)
+      box-shadow                  : ZDEPTH_SHADOW_1
+      transform                   : translateX(0%)