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

@@ -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;

src/components/chips/demoBasicUsage/style.scss

@@ -36,7 +36,7 @@
  }
  &:not(.md-readonly) {
  md-chip-template {
- padding-right: 20px;
+ padding-right: 5px;
  }
  }
  }