From 37b6f2d75936413d6bef6af097fc58438e4a5616 Mon Sep 17 00:00:00 2001
From: Topher Fangio <fangiotophia@gmail.com>
Date: Fri, 21 Aug 2015 12:51:47 -0500
Subject: [PATCH] fix(chips): Fix styling issues with padding & remove.

Update SCSS to fix:
 * remove icon jumping to next line on long chips
 * right padding of chips without a remove icon
 * location of remove icon in Firefox/Safari

fixes #4264, fixes #3276, #2410
---
 src/components/chips/chips.scss               | 21 ++++++++++++++-----
 .../chips/demoBasicUsage/style.scss           |  2 +-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/chips/chips.scss b/src/components/chips/chips.scss
index 8d859f588ca..20f653072e9 100644
--- a/src/components/chips/chips.scss
+++ b/src/components/chips/chips.scss
@@ -1,10 +1,12 @@
 $chip-font-size: rem(1.6) !default;
 $chip-height: rem(3.2) !default;
-$chip-padding: 0 rem(0.8) 0 rem(1.2) !default;
+$chip-padding: 0 rem(1.2) 0 rem(1.2) !default;
+$chip-remove-padding-right: rem(2.2) !default;
+$chip-remove-line-height: rem(2.2) !default;
 $chip-margin: rem(0.8) rem(0.8) 0 0 !default;
 $chip-wrap-padding: 0 0 rem(0.8) rem(0.3) !default;
 $chip-delete-icon-size: rem(1.8) !default;
-$contact-chip-padding: 0 rem(0.8) 0 0 !default;
+$contact-chip-padding: 0 rem(2.5) 0 0 !default;
 $contact-chip-suggestion-image-height: rem(4.0) !default;
 $contact-chip-suggestion-margin: rem(0.8) !default;
 $contact-chip-name-width: rem(12) !default;
@@ -50,15 +52,21 @@ $contact-chip-name-width: rem(12) !default;
 }
 .md-chips {
   @include pie-clearfix();
+
   display: block;
   font-family: $font-family;
   font-size: $chip-font-size;
   padding: $chip-wrap-padding;
   vertical-align: middle;
 
-  &:not('.md-readonly') {
+  &:not(.md-readonly) {
     cursor: text;
+
+    .md-chip {
+      padding-right: $chip-remove-padding-right;
+    }
   }
+
   .md-chip {
     cursor: default;
     border-radius: $chip-height / 2;
@@ -70,6 +78,8 @@ $contact-chip-name-width: rem(12) !default;
     float: left;
     box-sizing: border-box;
     max-width: 100%;
+    position: relative;
+
     .md-chip-content {
       display: block;
       padding-right:rem(0.4);
@@ -83,8 +93,9 @@ $contact-chip-name-width: rem(12) !default;
       }
     }
     .md-chip-remove-container {
-      display: inline-block;
-      margin-right: rem(-0.5);
+      position: absolute;
+      right: 0;
+      line-height: $chip-remove-line-height;
     }
     .md-chip-remove {
       text-align: center;
diff --git a/src/components/chips/demoBasicUsage/style.scss b/src/components/chips/demoBasicUsage/style.scss
index baa80c60b44..60d984de3f0 100644
--- a/src/components/chips/demoBasicUsage/style.scss
+++ b/src/components/chips/demoBasicUsage/style.scss
@@ -36,7 +36,7 @@
     }
     &:not(.md-readonly) {
       md-chip-template {
-        padding-right: 20px;
+        padding-right: 5px;
       }
     }
   }