You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

186 lines
6.3 KiB

7 years ago
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v1.1.3
  6. */
  7. .md-contact-chips .md-chips md-chip {
  8. padding: 0 25px 0 0; }
  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 {
  12. float: left; }
  13. [dir=rtl] .md-contact-chips .md-chips md-chip .md-contact-avatar {
  14. float: right; }
  15. .md-contact-chips .md-chips md-chip .md-contact-avatar img {
  16. height: 32px;
  17. border-radius: 16px; }
  18. .md-contact-chips .md-chips md-chip .md-contact-name {
  19. display: inline-block;
  20. height: 32px;
  21. margin-left: 8px; }
  22. [dir=rtl] .md-contact-chips .md-chips md-chip .md-contact-name {
  23. margin-left: auto;
  24. margin-right: 8px; }
  25. .md-contact-suggestion {
  26. height: 56px; }
  27. .md-contact-suggestion img {
  28. height: 40px;
  29. border-radius: 20px;
  30. margin-top: 8px; }
  31. .md-contact-suggestion .md-contact-name {
  32. margin-left: 8px;
  33. width: 120px; }
  34. [dir=rtl] .md-contact-suggestion .md-contact-name {
  35. margin-left: auto;
  36. margin-right: 8px; }
  37. .md-contact-suggestion .md-contact-name, .md-contact-suggestion .md-contact-email {
  38. display: inline-block;
  39. overflow: hidden;
  40. text-overflow: ellipsis; }
  41. .md-contact-chips-suggestions li {
  42. height: 100%; }
  43. .md-chips {
  44. display: block;
  45. font-family: Roboto, "Helvetica Neue", sans-serif;
  46. font-size: 16px;
  47. padding: 0 0 8px 3px;
  48. vertical-align: middle; }
  49. .md-chips:after {
  50. content: '';
  51. display: table;
  52. clear: both; }
  53. [dir=rtl] .md-chips {
  54. padding: 0 3px 8px 0; }
  55. .md-chips.md-readonly .md-chip-input-container {
  56. min-height: 32px; }
  57. .md-chips:not(.md-readonly) {
  58. cursor: text; }
  59. .md-chips.md-removable md-chip {
  60. padding-right: 22px; }
  61. [dir=rtl] .md-chips.md-removable md-chip {
  62. padding-right: 0;
  63. padding-left: 22px; }
  64. .md-chips.md-removable md-chip .md-chip-content {
  65. padding-right: 4px; }
  66. [dir=rtl] .md-chips.md-removable md-chip .md-chip-content {
  67. padding-right: 0;
  68. padding-left: 4px; }
  69. .md-chips md-chip {
  70. cursor: default;
  71. border-radius: 16px;
  72. display: block;
  73. height: 32px;
  74. line-height: 32px;
  75. margin: 8px 8px 0 0;
  76. padding: 0 12px 0 12px;
  77. float: left;
  78. box-sizing: border-box;
  79. max-width: 100%;
  80. position: relative; }
  81. [dir=rtl] .md-chips md-chip {
  82. margin: 8px 0 0 8px; }
  83. [dir=rtl] .md-chips md-chip {
  84. float: right; }
  85. .md-chips md-chip .md-chip-content {
  86. display: block;
  87. float: left;
  88. white-space: nowrap;
  89. max-width: 100%;
  90. overflow: hidden;
  91. text-overflow: ellipsis; }
  92. [dir=rtl] .md-chips md-chip .md-chip-content {
  93. float: right; }
  94. .md-chips md-chip .md-chip-content:focus {
  95. outline: none; }
  96. .md-chips md-chip._md-chip-content-edit-is-enabled {
  97. -webkit-user-select: none;
  98. /* webkit (safari, chrome) browsers */
  99. -moz-user-select: none;
  100. /* mozilla browsers */
  101. -khtml-user-select: none;
  102. /* webkit (konqueror) browsers */
  103. -ms-user-select: none;
  104. /* IE10+ */ }
  105. .md-chips md-chip .md-chip-remove-container {
  106. position: absolute;
  107. right: 0;
  108. line-height: 22px; }
  109. [dir=rtl] .md-chips md-chip .md-chip-remove-container {
  110. right: auto;
  111. left: 0; }
  112. .md-chips md-chip .md-chip-remove {
  113. text-align: center;
  114. width: 32px;
  115. height: 32px;
  116. min-width: 0;
  117. padding: 0;
  118. background: transparent;
  119. border: none;
  120. box-shadow: none;
  121. margin: 0;
  122. position: relative; }
  123. .md-chips md-chip .md-chip-remove md-icon {
  124. height: 18px;
  125. width: 18px;
  126. position: absolute;
  127. top: 50%;
  128. left: 50%;
  129. -webkit-transform: translate3d(-50%, -50%, 0);
  130. transform: translate3d(-50%, -50%, 0); }
  131. .md-chips .md-chip-input-container {
  132. display: block;
  133. line-height: 32px;
  134. margin: 8px 8px 0 0;
  135. padding: 0;
  136. float: left; }
  137. [dir=rtl] .md-chips .md-chip-input-container {
  138. margin: 8px 0 0 8px; }
  139. [dir=rtl] .md-chips .md-chip-input-container {
  140. float: right; }
  141. .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"] {
  142. border: 0;
  143. height: 32px;
  144. line-height: 32px;
  145. padding: 0; }
  146. .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 {
  147. outline: none; }
  148. .md-chips .md-chip-input-container md-autocomplete, .md-chips .md-chip-input-container md-autocomplete-wrap {
  149. background: transparent;
  150. height: 32px; }
  151. .md-chips .md-chip-input-container md-autocomplete md-autocomplete-wrap {
  152. box-shadow: none; }
  153. .md-chips .md-chip-input-container md-autocomplete input {
  154. position: relative; }
  155. .md-chips .md-chip-input-container input {
  156. border: 0;
  157. height: 32px;
  158. line-height: 32px;
  159. padding: 0; }
  160. .md-chips .md-chip-input-container input:focus {
  161. outline: none; }
  162. .md-chips .md-chip-input-container md-autocomplete, .md-chips .md-chip-input-container md-autocomplete-wrap {
  163. height: 32px; }
  164. .md-chips .md-chip-input-container md-autocomplete {
  165. box-shadow: none; }
  166. .md-chips .md-chip-input-container md-autocomplete input {
  167. position: relative; }
  168. .md-chips .md-chip-input-container:not(:first-child) {
  169. margin: 8px 8px 0 0; }
  170. [dir=rtl] .md-chips .md-chip-input-container:not(:first-child) {
  171. margin: 8px 0 0 8px; }
  172. .md-chips .md-chip-input-container input {
  173. background: transparent;
  174. border-width: 0; }
  175. .md-chips md-autocomplete button {
  176. display: none; }
  177. @media screen and (-ms-high-contrast: active) {
  178. .md-chip-input-container,
  179. md-chip {
  180. border: 1px solid #fff; }
  181. .md-chip-input-container md-autocomplete {
  182. border: none; } }