2 * Angular Material Design
3 * https://github.com/angular/material
7 .md-contact-chips .md-chips md-chip {
9 [dir=rtl] .md-contact-chips .md-chips md-chip {
10 padding: 0 0 0 25px; }
11 .md-contact-chips .md-chips md-chip .md-contact-avatar {
13 [dir=rtl] .md-contact-chips .md-chips md-chip .md-contact-avatar {
15 .md-contact-chips .md-chips md-chip .md-contact-avatar img {
17 border-radius: 16px; }
18 .md-contact-chips .md-chips md-chip .md-contact-name {
19 display: inline-block;
22 [dir=rtl] .md-contact-chips .md-chips md-chip .md-contact-name {
26 .md-contact-suggestion {
28 .md-contact-suggestion img {
32 .md-contact-suggestion .md-contact-name {
35 [dir=rtl] .md-contact-suggestion .md-contact-name {
38 .md-contact-suggestion .md-contact-name, .md-contact-suggestion .md-contact-email {
39 display: inline-block;
41 text-overflow: ellipsis; }
43 .md-contact-chips-suggestions li {
48 font-family: Roboto, "Helvetica Neue", sans-serif;
51 vertical-align: middle; }
57 padding: 0 3px 8px 0; }
58 .md-chips.md-readonly .md-chip-input-container {
60 .md-chips:not(.md-readonly) {
62 .md-chips.md-removable md-chip {
63 padding-right: 22px; }
64 [dir=rtl] .md-chips.md-removable md-chip {
67 .md-chips.md-removable md-chip .md-chip-content {
69 [dir=rtl] .md-chips.md-removable md-chip .md-chip-content {
79 padding: 0 12px 0 12px;
81 box-sizing: border-box;
84 [dir=rtl] .md-chips md-chip {
85 margin: 8px 0 0 8px; }
86 [dir=rtl] .md-chips md-chip {
88 .md-chips md-chip .md-chip-content {
94 text-overflow: ellipsis; }
95 [dir=rtl] .md-chips md-chip .md-chip-content {
97 .md-chips md-chip .md-chip-content:focus {
99 .md-chips md-chip._md-chip-content-edit-is-enabled {
100 -webkit-user-select: none;
101 /* webkit (safari, chrome) browsers */
102 -moz-user-select: none;
103 /* mozilla browsers */
104 -khtml-user-select: none;
105 /* webkit (konqueror) browsers */
106 -ms-user-select: none;
108 .md-chips md-chip .md-chip-remove-container {
112 [dir=rtl] .md-chips md-chip .md-chip-remove-container {
115 .md-chips md-chip .md-chip-remove {
121 background: transparent;
125 position: relative; }
126 .md-chips md-chip .md-chip-remove md-icon {
132 -webkit-transform: translate3d(-50%, -50%, 0);
133 transform: translate3d(-50%, -50%, 0); }
134 .md-chips .md-chip-input-container {
140 [dir=rtl] .md-chips .md-chip-input-container {
141 margin: 8px 0 0 8px; }
142 [dir=rtl] .md-chips .md-chip-input-container {
144 .md-chips .md-chip-input-container input:not([type]), .md-chips .md-chip-input-container input[type="email"], .md-chips .md-chip-input-container input[type="number"], .md-chips .md-chip-input-container input[type="tel"], .md-chips .md-chip-input-container input[type="url"], .md-chips .md-chip-input-container input[type="text"] {
149 .md-chips .md-chip-input-container input:not([type]):focus, .md-chips .md-chip-input-container input[type="email"]:focus, .md-chips .md-chip-input-container input[type="number"]:focus, .md-chips .md-chip-input-container input[type="tel"]:focus, .md-chips .md-chip-input-container input[type="url"]:focus, .md-chips .md-chip-input-container input[type="text"]:focus {
151 .md-chips .md-chip-input-container md-autocomplete, .md-chips .md-chip-input-container md-autocomplete-wrap {
152 background: transparent;
154 .md-chips .md-chip-input-container md-autocomplete md-autocomplete-wrap {
156 .md-chips .md-chip-input-container md-autocomplete input {
157 position: relative; }
158 .md-chips .md-chip-input-container input {
163 .md-chips .md-chip-input-container input:focus {
165 .md-chips .md-chip-input-container md-autocomplete, .md-chips .md-chip-input-container md-autocomplete-wrap {
167 .md-chips .md-chip-input-container md-autocomplete {
169 .md-chips .md-chip-input-container md-autocomplete input {
170 position: relative; }
171 .md-chips .md-chip-input-container:not(:first-child) {
172 margin: 8px 8px 0 0; }
173 [dir=rtl] .md-chips .md-chip-input-container:not(:first-child) {
174 margin: 8px 0 0 8px; }
175 .md-chips .md-chip-input-container input {
176 background: transparent;
178 .md-chips md-autocomplete button {
181 @media screen and (-ms-high-contrast: active) {
182 .md-chip-input-container,
184 border: 1px solid #fff; }
185 .md-chip-input-container md-autocomplete {