From eeac7956eb643dbcb5c90c6003a553e360a1fba5 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 23 Feb 2016 16:13:27 -0500
Subject: [PATCH] fix(chip): cleaned up some of the UI and added some sass
 variables

references #5386
---
 ionic/components/chip/chip.ios.scss |  3 +-
 ionic/components/chip/chip.md.scss  |  3 +-
 ionic/components/chip/chip.scss     | 56 +++++++++++++++++------------
 3 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/ionic/components/chip/chip.ios.scss b/ionic/components/chip/chip.ios.scss
index 95368bee23..f8c7a27042 100644
--- a/ionic/components/chip/chip.ios.scss
+++ b/ionic/components/chip/chip.ios.scss
@@ -4,6 +4,7 @@
 // --------------------------------------------------
 
 ion-chip {
+
 }
 
 
@@ -13,7 +14,7 @@ ion-chip {
 @each $color-name, $color-value in $colors-ios {
 
   ion-chip {
-    > ion-icon[#{$color-name}] {
+    ion-icon[#{$color-name}] {
       background-color: $color-value;
       color: color-inverse($color-value) !important;
     }
diff --git a/ionic/components/chip/chip.md.scss b/ionic/components/chip/chip.md.scss
index f7c6d89808..e2f1292f4a 100644
--- a/ionic/components/chip/chip.md.scss
+++ b/ionic/components/chip/chip.md.scss
@@ -4,6 +4,7 @@
 // --------------------------------------------------
 
 ion-chip {
+
 }
 
 
@@ -13,7 +14,7 @@ ion-chip {
 @each $color-name, $color-value in $colors-md {
 
   ion-chip {
-    > ion-icon [#{$color-name}] {
+    ion-icon[#{$color-name}] {
       background-color: $color-value;
       color: color-inverse($color-value) !important;
     }
diff --git a/ionic/components/chip/chip.scss b/ionic/components/chip/chip.scss
index e5f571b3b9..7660d9b5bc 100644
--- a/ionic/components/chip/chip.scss
+++ b/ionic/components/chip/chip.scss
@@ -3,29 +3,41 @@
 // Chip
 // --------------------------------------------------
 
+$chip-background-color:      rgba(0,0,0,0.12) !default;
+$chip-font-size:             13px !default;
+$chip-height:                32px !default;
+$chip-border-radius:         16px !default;
+$chip-padding:               0 12px !default;
+$chip-margin:                2px 0 !default;
+
+$chip-label-color:           rgba(0,0,0,0.87) !default;
+
+$chip-icon-color:            rgba(0,0,0,0.87) !default;
 
 ion-chip {
-  font-size: 13px;
-  font-weight: normal;
-  background: rgba(0,0,0,0.12);
+  background: $chip-background-color;
   display: inline-block;
-  height: 32px;
-  line-height: 32px;
-  border-radius: 16px;
-  padding: 0 12px;
+  height: $chip-height;
+  line-height: $chip-height;
+  border-radius: $chip-border-radius;
+  padding: $chip-padding;
+  margin: $chip-margin;
+
   box-sizing: border-box;
   vertical-align: middle;
   display: inline-flex;
   align-self: center;
 
-  margin: 2px 0;
+  font-size: $chip-font-size;
+  font-weight: normal;
 
   ion-label {
     margin: 0;
-    color: rgba(0,0,0,0.87);
+    color: $chip-label-color;
   }
 
-  > ion-icon, > ion-avatar {
+  > ion-icon,
+  > ion-avatar {
     width: 32px;
     height: 32px;
     margin-left: -12px;
@@ -33,20 +45,18 @@ ion-chip {
     border-radius: 50%;
     text-align: center;
     line-height: 32px;
-    color: rgba(0,0,0,0.87);
-    // .flex-shrink(0);
+    color: $chip-icon-color;
     font-size: 18px;
-    // .flexbox();
-    // .align-items(center);
-    // .justify-content(center);
+
     img {
-        max-width: 100%;
-        max-height: 100%;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        display: block;
+      max-width: 100%;
+      max-height: 100%;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      display: block;
     }
+
     + ion-label {
       margin-left: 8px;
     }
@@ -58,9 +68,9 @@ ion-chip {
   }
 
   .button {
-    min-height: inherit;
+    height: inherit;
+    margin: 0;
     margin-right: -4px;
-    margin-left: 8px;
   }
 
   ion-icon[name="close-circle"] {