From 4511d8a4fd30b45c01af8fa636baf39a8db6ef4f Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 20 Oct 2015 23:51:41 +0200
Subject: [PATCH] Move autocomplete property values to variables

---
 components/autocomplete/_config.scss | 10 +++++++---
 components/autocomplete/style.scss   | 19 +++++++------------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/components/autocomplete/_config.scss b/components/autocomplete/_config.scss
index a8ad4ef3..36e86430 100644
--- a/components/autocomplete/_config.scss
+++ b/components/autocomplete/_config.scss
@@ -1,5 +1,9 @@
-$autocomplete-color-primary: unquote("rgb(#{$color-primary})");
 $autocomplete-color-primary-contrast: unquote("rgb(#{$color-primary-contrast})");
-$autocomplete-color-white: unquote("rgb(#{$color-white})");
-$autocomplete-suggestion-color-active: unquote("rgb(#{$palette-grey-200})");
+$autocomplete-color-primary: unquote("rgb(#{$color-primary})");
 $autocomplete-overflow-max-height: 45vh;
+$autocomplete-suggestion-active-background: unquote("rgb(#{$palette-grey-200})");
+$autocomplete-suggestion-padding: $unit;
+$autocomplete-suggestions-background: unquote("rgb(#{$color-white})");
+$autocomplete-value-border-radius: .2 * $unit;
+$autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0;
+$autocomplete-value-padding: $unit * .5 $unit * .75;
diff --git a/components/autocomplete/style.scss b/components/autocomplete/style.scss
index aac811a0..3dc394f8 100644
--- a/components/autocomplete/style.scss
+++ b/components/autocomplete/style.scss
@@ -3,12 +3,10 @@
 
 .root {
   position: relative;
-
   &.focus {
     .label {
       color: $autocomplete-color-primary;
     }
-
     .suggestions {
       max-height: $autocomplete-overflow-max-height;
       visibility: visible;
@@ -25,31 +23,29 @@
 
 .value {
   display: inline-block;
-  padding: $unit * .5 $unit * .75;
-  margin: $unit * .25 $unit * .5 $unit * .25 0;
+  padding: $autocomplete-value-padding;
+  margin: $autocomplete-value-margin;
   font-size: $font-size-tiny;
   color: $autocomplete-color-primary-contrast;
   cursor: pointer;
   background-color: $autocomplete-color-primary;
-  border-radius: 3px;
+  border-radius: $autocomplete-value-border-radius;
 }
 
 .suggestions {
   position: absolute;
-  z-index: 2;
+  z-index: $z-index-high;
   max-height: 0;
   overflow-x: hidden;
   overflow-y: scroll;
   visibility: hidden;
-  background-color: $autocomplete-color-white;
+  background-color: $autocomplete-suggestions-background;
   transition-timing-function: $animation-curve-default;
   transition-duration: $animation-duration;
   transition-property: max-height, box-shadow;
-
   &:not(.up) {
     bottom: auto;
   }
-
   &.up {
     top: auto;
     bottom: 0;
@@ -57,11 +53,10 @@
 }
 
 .suggestion {
-  padding: $unit;
+  padding: $autocomplete-suggestion-padding;
   cursor: pointer;
-
   &.active {
-    background-color: $autocomplete-suggestion-color-active;
+    background-color: $autocomplete-suggestion-active-background;
   }
 }