sync

Author: tinayuangao

src/demo-app/chips/chips-demo.ts

@@ -1,5 +1,7 @@
 import {Component} from '@angular/core';
-import {MdChipInputEvent, ENTER, COMMA} from '@angular/material';
+import {MdChipInputEvent, ENTER} from '@angular/material';
+
+const COMMA = 188;
 
 export interface Person {
   name: string;

src/lib/chips/chip-list.ts

@@ -22,8 +22,7 @@ import {
 
 import {MdChip} from './chip';
 import {FocusKeyManager} from '../core/a11y/focus-key-manager';
-import {SPACE, LEFT_ARROW, RIGHT_ARROW} from '../core/keyboard/keycodes';
-import {Subscription} from 'rxjs/Subscription';
+import {BACKSPACE, DELETE, SPACE, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW} from '../core/keyboard/keycodes';
 import {coerceBooleanProperty, Directionality} from '@angular/cdk';
 import {Subscription} from 'rxjs/Subscription';
 

src/lib/chips/chips.scss

@@ -3,89 +3,18 @@
 $mat-chip-vertical-padding: 8px;
 $mat-chip-horizontal-padding: 12px;
 
-$mat-chip-vertical-padding: 8px - $mat-chip-border-width;
-$mat-chip-horizontal-padding: 12px - $mat-chip-border-width;
-
-$mat-chip-margin: ($mat-chip-horizontal-padding / 4);
-
-$mat-chip-remove-margin: $mat-chip-line-height * 2;
-$mat-chip-remove-icon-offset: 3px;
-$mat-chip-remove-size: 24px;
-$mat-chip-remove-font-size: 18px;
-
-@mixin chip-margin() {
-  [dir='rtl'] & {
-    margin-right: $mat-chip-margin;
-    margin-left: $mat-chip-margin;
-  }
-
-  [dir='ltr'] & {
-    margin-right: $mat-chip-margin;
-    margin-left: $mat-chip-margin;
-  }
-}
-
-@mixin chip-margin-last() {
-  [dir='rtl'] & {
-    margin-left: 0;
-    margin-right: $mat-chip-margin;
-  }
-
-  [dir='ltr'] & {
-    margin-right: 0;
-    margin-left: $mat-chip-margin;
-  }
-}
-
-@mixin chip-margin-first() {
-  [dir='ltr'] & {
-    margin-left: 0;
-    margin-right: $mat-chip-margin;
-  }
-
-  [dir='rtl'] & {
-    margin-right: 0;
-    margin-left: $mat-chip-margin;
-  }
-}
+$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;
-
-  .mat-chip {
-    margin: $mat-chip-margin;
-
-    // Do not apply the special margins inside an input container
-    // Remove the margin from the first element (in both LTR and RTL)
-    &:first-child {
-      @include chip-margin-first();
-    }
-
-    // Remove the margin from the last element (in both LTR and RTL)
-    &:last-child {
-        @include chip-margin-last();
-    }
-  }
-}
-
-.mat-input-container .mat-chip-list-wrapper .map-chip:last-child {
-  @include chip-margin();
 }
 
-.mat-input-prefix .mat-chip-list-wrapper {
-  flex-wrap: nowrap;
-}
-
-.mat-chip {
+.mat-chip:not(.mat-basic-chip) {
   display: inline-block;
-  position: relative;
-
-  padding: $mat-chip-vertical-padding $mat-chip-horizontal-padding;
-  border: $mat-chip-border-width solid transparent;
+  padding: $mat-chip-vertical-padding $mat-chip-horizontal-padding $mat-chip-vertical-padding $mat-chip-horizontal-padding;
   border-radius: $mat-chip-horizontal-padding * 2;
 
   // Apply a margin to adjacent sibling chips.
@@ -105,17 +34,26 @@ $mat-chip-remove-font-size: 18px;
 .mat-chip-list-stacked .mat-chip-list-wrapper {
   display: block;
 
-  .mat-chip {
+  .mat-chip:not(.mat-basic-chip) {
     display: block;
     margin: 0;
     margin-bottom: $mat-chip-vertical-padding;
+
+    [dir='rtl'] & {
+      margin: 0;
+      margin-bottom: $mat-chip-vertical-padding;
+    }
+
+    &:last-child, [dir='rtl'] &:last-child {
+      margin-bottom: 0;
+    }
   }
 }
 
-.mat-chip-remove.mat-chip-remove-hidden {
-  display: none;
+.mat-input-prefix .mat-chip-list-wrapper {
+  margin-bottom: $mat-chip-vertical-padding;
 }
 
-.mat-chip-input {
-  @include chip-margin-last();
+.mat-chip-remove.mat-chip-remove-hidden {
+  display: none;
 }