chips.css 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.11.4
  6. */
  7. .md-contact-chips .md-chips .md-chip {
  8. padding: 0 25px 0 0; }
  9. .md-contact-chips .md-chips .md-chip .md-contact-avatar {
  10. float: left; }
  11. .md-contact-chips .md-chips .md-chip .md-contact-avatar img {
  12. height: 32px;
  13. border-radius: 16px; }
  14. .md-contact-chips .md-chips .md-chip .md-contact-name {
  15. display: inline-block;
  16. height: 32px;
  17. margin-left: 8px; }
  18. .md-contact-suggestion {
  19. height: 56px; }
  20. .md-contact-suggestion img {
  21. height: 40px;
  22. border-radius: 20px;
  23. margin-top: 8px; }
  24. .md-contact-suggestion .md-contact-name {
  25. margin-left: 8px;
  26. width: 120px; }
  27. .md-contact-suggestion .md-contact-name, .md-contact-suggestion .md-contact-email {
  28. display: inline-block;
  29. overflow: hidden;
  30. text-overflow: ellipsis; }
  31. .md-contact-chips-suggestions li {
  32. height: 100%; }
  33. .md-chips {
  34. display: block;
  35. font-family: Roboto, 'Helvetica Neue', sans-serif;
  36. font-size: 16px;
  37. padding: 0 0 8px 3px;
  38. vertical-align: middle; }
  39. .md-chips:after {
  40. content: '';
  41. display: table;
  42. clear: both; }
  43. .md-chips:not(.md-readonly) {
  44. cursor: text; }
  45. .md-chips:not(.md-readonly) .md-chip {
  46. padding-right: 22px; }
  47. .md-chips .md-chip {
  48. cursor: default;
  49. border-radius: 16px;
  50. display: block;
  51. height: 32px;
  52. line-height: 32px;
  53. margin: 8px 8px 0 0;
  54. padding: 0 12px 0 12px;
  55. float: left;
  56. box-sizing: border-box;
  57. max-width: 100%;
  58. position: relative; }
  59. .md-chips .md-chip .md-chip-content {
  60. display: block;
  61. padding-right: 4px;
  62. float: left;
  63. white-space: nowrap;
  64. max-width: 100%;
  65. overflow: hidden;
  66. text-overflow: ellipsis; }
  67. .md-chips .md-chip .md-chip-content:focus {
  68. outline: none; }
  69. .md-chips .md-chip .md-chip-remove-container {
  70. position: absolute;
  71. right: 0;
  72. line-height: 22px; }
  73. .md-chips .md-chip .md-chip-remove {
  74. text-align: center;
  75. width: 32px;
  76. height: 32px;
  77. min-width: 0;
  78. padding: 0;
  79. background: transparent;
  80. border: none;
  81. box-shadow: none;
  82. margin: 0;
  83. position: relative; }
  84. .md-chips .md-chip .md-chip-remove md-icon {
  85. height: 18px;
  86. width: 18px;
  87. position: absolute;
  88. top: 50%;
  89. left: 50%;
  90. -webkit-transform: translate3d(-50%, -50%, 0);
  91. transform: translate3d(-50%, -50%, 0); }
  92. .md-chips .md-chip-input-container {
  93. display: block;
  94. line-height: 32px;
  95. margin: 8px 8px 0 0;
  96. padding: 0 12px 0 12px;
  97. float: left; }
  98. .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"] {
  99. border: 0;
  100. height: 32px;
  101. line-height: 32px;
  102. padding: 0; }
  103. .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 {
  104. outline: none; }
  105. .md-chips .md-chip-input-container md-autocomplete, .md-chips .md-chip-input-container md-autocomplete-wrap {
  106. background: transparent;
  107. height: 32px; }
  108. .md-chips .md-chip-input-container md-autocomplete md-autocomplete-wrap {
  109. box-shadow: none; }
  110. .md-chips .md-chip-input-container md-autocomplete input {
  111. position: relative; }
  112. .md-chips .md-chip-input-container input {
  113. border: 0;
  114. height: 32px;
  115. line-height: 32px;
  116. padding: 0; }
  117. .md-chips .md-chip-input-container input:focus {
  118. outline: none; }
  119. .md-chips .md-chip-input-container md-autocomplete, .md-chips .md-chip-input-container md-autocomplete-wrap {
  120. height: 32px; }
  121. .md-chips .md-chip-input-container md-autocomplete {
  122. box-shadow: none; }
  123. .md-chips .md-chip-input-container md-autocomplete input {
  124. position: relative; }
  125. .md-chips .md-chip-input-container:not(:first-child) {
  126. margin: 8px 8px 0 0; }
  127. .md-chips .md-chip-input-container input {
  128. background: transparent;
  129. border-width: 0; }
  130. .md-chips md-autocomplete button {
  131. display: none; }
  132. @media screen and (-ms-high-contrast: active) {
  133. .md-chip-input-container, md-chip {
  134. border: 1px solid #fff; }
  135. .md-chip-input-container md-autocomplete {
  136. border: none; } }