autocomplete.css 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.11.4
  6. */
  7. @-webkit-keyframes md-autocomplete-list-out {
  8. 0% {
  9. -webkit-animation-timing-function: linear;
  10. animation-timing-function: linear; }
  11. 50% {
  12. opacity: 0;
  13. height: 40px;
  14. -webkit-animation-timing-function: ease-in;
  15. animation-timing-function: ease-in; }
  16. 100% {
  17. height: 0;
  18. opacity: 0; } }
  19. @keyframes md-autocomplete-list-out {
  20. 0% {
  21. -webkit-animation-timing-function: linear;
  22. animation-timing-function: linear; }
  23. 50% {
  24. opacity: 0;
  25. height: 40px;
  26. -webkit-animation-timing-function: ease-in;
  27. animation-timing-function: ease-in; }
  28. 100% {
  29. height: 0;
  30. opacity: 0; } }
  31. @-webkit-keyframes md-autocomplete-list-in {
  32. 0% {
  33. opacity: 0;
  34. height: 0;
  35. -webkit-animation-timing-function: ease-out;
  36. animation-timing-function: ease-out; }
  37. 50% {
  38. opacity: 0;
  39. height: 40px; }
  40. 100% {
  41. opacity: 1;
  42. height: 40px; } }
  43. @keyframes md-autocomplete-list-in {
  44. 0% {
  45. opacity: 0;
  46. height: 0;
  47. -webkit-animation-timing-function: ease-out;
  48. animation-timing-function: ease-out; }
  49. 50% {
  50. opacity: 0;
  51. height: 40px; }
  52. 100% {
  53. opacity: 1;
  54. height: 40px; } }
  55. md-autocomplete {
  56. border-radius: 2px;
  57. display: block;
  58. height: 40px;
  59. position: relative;
  60. overflow: visible;
  61. min-width: 190px; }
  62. md-autocomplete[disabled] input {
  63. cursor: not-allowed; }
  64. md-autocomplete[md-floating-label] {
  65. border-radius: 0;
  66. background: transparent;
  67. height: auto; }
  68. md-autocomplete[md-floating-label] md-input-container {
  69. padding-bottom: 26px; }
  70. md-autocomplete[md-floating-label] md-input-container.md-input-has-messages {
  71. padding-bottom: 2px; }
  72. md-autocomplete[md-floating-label] md-autocomplete-wrap {
  73. height: auto; }
  74. md-autocomplete[md-floating-label] button {
  75. position: absolute;
  76. top: auto;
  77. bottom: 0;
  78. right: 0;
  79. width: 30px;
  80. height: 30px; }
  81. md-autocomplete md-autocomplete-wrap {
  82. display: block;
  83. position: relative;
  84. overflow: visible;
  85. height: 40px; }
  86. md-autocomplete md-autocomplete-wrap.md-menu-showing {
  87. z-index: 51; }
  88. md-autocomplete md-autocomplete-wrap md-progress-linear {
  89. position: absolute;
  90. bottom: -2px;
  91. left: 0; }
  92. md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate {
  93. position: absolute;
  94. top: 0;
  95. left: 0;
  96. width: 100%;
  97. height: 3px;
  98. transition: none; }
  99. md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate .md-container {
  100. transition: none;
  101. height: 3px; }
  102. md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate.ng-enter {
  103. transition: opacity 0.15s linear; }
  104. md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate.ng-enter.ng-enter-active {
  105. opacity: 1; }
  106. md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate.ng-leave {
  107. transition: opacity 0.15s linear; }
  108. md-autocomplete md-autocomplete-wrap md-progress-linear .md-mode-indeterminate.ng-leave.ng-leave-active {
  109. opacity: 0; }
  110. md-autocomplete input:not(.md-input) {
  111. font-size: 14px;
  112. box-sizing: border-box;
  113. border: none;
  114. box-shadow: none;
  115. outline: none;
  116. background: transparent;
  117. width: 100%;
  118. padding: 0 15px;
  119. line-height: 40px;
  120. height: 40px; }
  121. md-autocomplete input:not(.md-input)::-ms-clear {
  122. display: none; }
  123. md-autocomplete button {
  124. position: relative;
  125. line-height: 20px;
  126. text-align: center;
  127. width: 30px;
  128. height: 30px;
  129. cursor: pointer;
  130. border: none;
  131. border-radius: 50%;
  132. padding: 0;
  133. font-size: 12px;
  134. background: transparent;
  135. margin: auto 5px; }
  136. md-autocomplete button:after {
  137. content: '';
  138. position: absolute;
  139. top: -6px;
  140. right: -6px;
  141. bottom: -6px;
  142. left: -6px;
  143. border-radius: 50%;
  144. -webkit-transform: scale(0);
  145. transform: scale(0);
  146. opacity: 0;
  147. transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
  148. md-autocomplete button:focus {
  149. outline: none; }
  150. md-autocomplete button:focus:after {
  151. -webkit-transform: scale(1);
  152. transform: scale(1);
  153. opacity: 1; }
  154. md-autocomplete button md-icon {
  155. position: absolute;
  156. top: 50%;
  157. left: 50%;
  158. -webkit-transform: translate3d(-50%, -50%, 0) scale(0.9);
  159. transform: translate3d(-50%, -50%, 0) scale(0.9); }
  160. md-autocomplete button md-icon path {
  161. stroke-width: 0; }
  162. md-autocomplete button.ng-enter {
  163. -webkit-transform: scale(0);
  164. transform: scale(0);
  165. transition: -webkit-transform 0.15s ease-out;
  166. transition: transform 0.15s ease-out; }
  167. md-autocomplete button.ng-enter.ng-enter-active {
  168. -webkit-transform: scale(1);
  169. transform: scale(1); }
  170. md-autocomplete button.ng-leave {
  171. transition: -webkit-transform 0.15s ease-out;
  172. transition: transform 0.15s ease-out; }
  173. md-autocomplete button.ng-leave.ng-leave-active {
  174. -webkit-transform: scale(0);
  175. transform: scale(0); }
  176. @media screen and (-ms-high-contrast: active) {
  177. md-autocomplete input {
  178. border: 1px solid #fff; }
  179. md-autocomplete li:focus {
  180. color: #fff; } }
  181. .md-virtual-repeat-container.md-autocomplete-suggestions-container {
  182. position: absolute;
  183. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  184. height: 225.5px;
  185. max-height: 225.5px;
  186. z-index: 100; }
  187. .md-autocomplete-suggestions {
  188. margin: 0;
  189. list-style: none;
  190. padding: 0; }
  191. .md-autocomplete-suggestions li {
  192. font-size: 14px;
  193. overflow: hidden;
  194. padding: 0 15px;
  195. line-height: 48px;
  196. height: 48px;
  197. transition: background 0.15s linear;
  198. margin: 0;
  199. white-space: nowrap;
  200. text-overflow: ellipsis; }
  201. .md-autocomplete-suggestions li:focus {
  202. outline: none; }
  203. .md-autocomplete-suggestions li:not(.md-not-found-wrapper) {
  204. cursor: pointer; }
  205. @media screen and (-ms-high-contrast: active) {
  206. md-autocomplete, .md-autocomplete-suggestions {
  207. border: 1px solid #fff; } }