More specific style for autocomplete

components/autocomplete/index.jsx

@@ -3,7 +3,7 @@
 import { addons } from 'react/addons';
 import utils from '../utils';
 import Input from '../input';
-import style from './style';
+import style from './style_test';
 
 export default React.createClass({
   mixins: [addons.PureRenderMixin],
@@ -171,14 +171,16 @@ export default React.createClass({
 
   renderSuggestions () {
     return [...this._getSuggestions()].map(([key, value]) => {
-      let className = style[this.state.active !== key ? 'suggestion' : 'suggestion-active'];
+      let className = style.suggestion;
+      if (this.state.active === key) className += ` ${style.active}`;
       return <li id={key} key={key} className={className}>{value}</li>;
     });
   },
 
   render () {
     let containerClassName = style.container;
-    let suggestionsClassName = style[this.state.focus ? 'suggestions-active' : 'suggestions'];
+    let suggestionsClassName = style.suggestions;
+    if (this.state.focus) suggestionsClassName += ` ${style.focus}`;
     if (this.props.className) containerClassName += ` ${this.props.className}`;
 
     return (

components/autocomplete/style.scss

@@ -1,14 +1,12 @@
 @import "../variables";
 @import "../mixins";
 
-//-- Variables
 $autocomplete-value-background: unquote("rgb(#{$color-primary})");
 $autocomplete-value-color: unquote("rgb(#{$color-primary-contrast})");
 $autocomplete-label-color: unquote("rgb(#{$color-primary})");
 $autocomplete-suggestions-background: unquote("rgb(#{$color-white})");
 $autocomplete-suggestion-active-background: unquote("rgb(#{$palette-grey-200})");
 
-//-- Local styles
 .container {
   position: relative;
 }
@@ -35,33 +33,35 @@ $autocomplete-suggestion-active-background: unquote("rgb(#{$palette-grey-200})")
   position: absolute;
   z-index: 2;
   width: 100%;
-  height: 0;
   max-height: 50vh;
   margin-top: - $input-margin-bottom;
   overflow-x: hidden;
   overflow-y: scroll;
   background-color: $autocomplete-suggestions-background;
-  opacity: 0;
   transition-timing-function: $animation-curve-default;
   transition-duration: .2s;
   transition-property: height, box-shadow, opacity, transform;
-  transform: translateY(- $unit);
-}
 
-.suggestions-active {
-  @extend .suggestions;
-  height: auto;
-  box-shadow: $zdepth-shadow-1;
-  opacity: 1;
-  transform: translateY(0%);
+  &:not(.focus) {
+    height: 0;
+    box-shadow: none;
+    opacity: 0;
+    transform: translateY(- $unit);
+  }
+
+  &.focus {
+    height: auto;
+    box-shadow: $zdepth-shadow-1;
+    opacity: 1;
+    transform: translateY(0%);
+  }
 }
 
 .suggestion {
   padding: $unit;
   cursor: pointer;
-}
 
-.suggestion-active {
-  @extend .suggestion;
-  background-color: $autocomplete-suggestion-active-background;
+  &.active {
+    background-color: $autocomplete-suggestion-active-background;
+  }
 }