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.

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