From 5d03c1a69fc961545a80d13dc3d307d8bf2dc64e Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 3 May 2017 01:37:47 +0200
Subject: [PATCH] fix(chips): wrong margin on single chip (#4366)

* Fixes single chips having a left margin.
* Reduces the amount of CSS used to set up the chip margins.

Fixes #4359.
---
 src/lib/chips/chips.scss | 47 ++++++++--------------------------------
 1 file changed, 9 insertions(+), 38 deletions(-)

diff --git a/src/lib/chips/chips.scss b/src/lib/chips/chips.scss
index 3ea4afb1bd6..cae9826a096 100644
--- a/src/lib/chips/chips.scss
+++ b/src/lib/chips/chips.scss
@@ -6,48 +6,10 @@ $mat-chip-line-height: 16px;
 $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
 
 .mat-chip-list-wrapper {
-
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-start;
-
-  /*
-   * Only apply the margins to chips
-   */
-  .mat-chip:not(.mat-basic-chip) {
-    margin: 0 $mat-chips-chip-margin 0 $mat-chips-chip-margin;
-
-    // Remove the margin from the first element (in both LTR and RTL)
-    &:first-child {
-      margin: {
-        left: 0;
-        right: $mat-chips-chip-margin;
-      }
-
-      [dir='rtl'] & {
-        margin: {
-          left: $mat-chips-chip-margin;
-          right: 0;
-        }
-      }
-    }
-
-    // Remove the margin from the last element (in both LTR and RTL)
-    &:last-child {
-      margin: {
-        left: $mat-chips-chip-margin;
-        right: 0;
-      }
-
-      [dir='rtl'] & {
-        margin: {
-          left: 0;
-          right: $mat-chips-chip-margin;
-        }
-      }
-    }
-  }
 }
 
 .mat-chip:not(.mat-basic-chip) {
@@ -57,6 +19,15 @@ $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
 
   font-size: $mat-chip-font-size;
   line-height: $mat-chip-line-height;
+
+  // Apply a margin to adjacent sibling chips.
+  & + & {
+    margin: 0 0 0 $mat-chips-chip-margin;
+
+    [dir='rtl'] & {
+      margin: 0 $mat-chips-chip-margin 0 0;
+    }
+  }
 }
 
 .mat-chip-list-stacked .mat-chip-list-wrapper {