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.

316 lines
12 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-input-container {
  8. display: inline-block;
  9. position: relative;
  10. padding: 2px;
  11. margin: 18px 0;
  12. vertical-align: middle;
  13. /*
  14. * The .md-input class is added to the input/textarea
  15. */ }
  16. md-input-container:after {
  17. content: '';
  18. display: table;
  19. clear: both; }
  20. md-input-container.md-block {
  21. display: block; }
  22. md-input-container .md-errors-spacer {
  23. float: right;
  24. min-height: 24px;
  25. min-width: 1px; }
  26. [dir=rtl] md-input-container .md-errors-spacer {
  27. float: left; }
  28. md-input-container > md-icon {
  29. position: absolute;
  30. top: 8px;
  31. left: 2px;
  32. right: auto; }
  33. [dir=rtl] md-input-container > md-icon {
  34. left: auto; }
  35. [dir=rtl] md-input-container > md-icon {
  36. right: 2px; }
  37. md-input-container textarea,
  38. md-input-container input[type="text"],
  39. md-input-container input[type="password"],
  40. md-input-container input[type="datetime"],
  41. md-input-container input[type="datetime-local"],
  42. md-input-container input[type="date"],
  43. md-input-container input[type="month"],
  44. md-input-container input[type="time"],
  45. md-input-container input[type="week"],
  46. md-input-container input[type="number"],
  47. md-input-container input[type="email"],
  48. md-input-container input[type="url"],
  49. md-input-container input[type="search"],
  50. md-input-container input[type="tel"],
  51. md-input-container input[type="color"] {
  52. /* remove default appearance from all input/textarea */
  53. -moz-appearance: none;
  54. -webkit-appearance: none; }
  55. md-input-container input[type="date"],
  56. md-input-container input[type="datetime-local"],
  57. md-input-container input[type="month"],
  58. md-input-container input[type="time"],
  59. md-input-container input[type="week"] {
  60. min-height: 26px; }
  61. md-input-container textarea {
  62. resize: none;
  63. overflow: hidden; }
  64. md-input-container textarea.md-input {
  65. min-height: 26px;
  66. -ms-flex-preferred-size: auto; }
  67. md-input-container textarea[md-no-autogrow] {
  68. height: auto;
  69. overflow: auto; }
  70. md-input-container label:not(.md-container-ignore) {
  71. position: absolute;
  72. bottom: 100%;
  73. left: 0;
  74. right: auto; }
  75. [dir=rtl] md-input-container label:not(.md-container-ignore) {
  76. left: auto; }
  77. [dir=rtl] md-input-container label:not(.md-container-ignore) {
  78. right: 0; }
  79. md-input-container label:not(.md-container-ignore).md-required:after {
  80. content: ' *';
  81. font-size: 13px;
  82. vertical-align: top; }
  83. md-input-container label:not(.md-no-float):not(.md-container-ignore),
  84. md-input-container .md-placeholder {
  85. overflow: hidden;
  86. text-overflow: ellipsis;
  87. white-space: nowrap;
  88. width: 100%;
  89. -webkit-box-ordinal-group: 2;
  90. -webkit-order: 1;
  91. order: 1;
  92. pointer-events: none;
  93. -webkit-font-smoothing: antialiased;
  94. padding-left: 3px;
  95. padding-right: 0;
  96. z-index: 1;
  97. -webkit-transform: translate3d(0, 28px, 0) scale(1);
  98. transform: translate3d(0, 28px, 0) scale(1);
  99. -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  100. transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  101. transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  102. transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  103. max-width: 100%;
  104. -webkit-transform-origin: left top;
  105. transform-origin: left top; }
  106. [dir=rtl] md-input-container label:not(.md-no-float):not(.md-container-ignore), [dir=rtl]
  107. md-input-container .md-placeholder {
  108. padding-left: 0; }
  109. [dir=rtl] md-input-container label:not(.md-no-float):not(.md-container-ignore), [dir=rtl]
  110. md-input-container .md-placeholder {
  111. padding-right: 3px; }
  112. [dir=rtl] md-input-container label:not(.md-no-float):not(.md-container-ignore), [dir=rtl]
  113. md-input-container .md-placeholder {
  114. -webkit-transform-origin: right top;
  115. transform-origin: right top; }
  116. md-input-container .md-placeholder {
  117. position: absolute;
  118. top: 0;
  119. opacity: 0;
  120. -webkit-transition-property: opacity, -webkit-transform;
  121. transition-property: opacity, -webkit-transform;
  122. transition-property: opacity, transform;
  123. transition-property: opacity, transform, -webkit-transform;
  124. -webkit-transform: translate3d(0, 30px, 0);
  125. transform: translate3d(0, 30px, 0); }
  126. md-input-container.md-input-focused .md-placeholder {
  127. opacity: 1;
  128. -webkit-transform: translate3d(0, 24px, 0);
  129. transform: translate3d(0, 24px, 0); }
  130. md-input-container.md-input-has-value .md-placeholder {
  131. -webkit-transition: none;
  132. transition: none;
  133. opacity: 0; }
  134. md-input-container:not(.md-input-has-value) input:not(:focus),
  135. md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-ampm-field,
  136. md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-day-field,
  137. md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-hour-field,
  138. md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-millisecond-field,
  139. md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-minute-field,
  140. md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-month-field,
  141. md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-second-field,
  142. md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-week-field,
  143. md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-year-field,
  144. md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-text {
  145. color: transparent; }
  146. md-input-container .md-input {
  147. -webkit-box-ordinal-group: 3;
  148. -webkit-order: 2;
  149. order: 2;
  150. display: block;
  151. margin-top: 0;
  152. background: none;
  153. padding-top: 2px;
  154. padding-bottom: 1px;
  155. padding-left: 2px;
  156. padding-right: 2px;
  157. border-width: 0 0 1px 0;
  158. line-height: 26px;
  159. height: 30px;
  160. -ms-flex-preferred-size: 26px;
  161. border-radius: 0;
  162. border-style: solid;
  163. width: 100%;
  164. box-sizing: border-box;
  165. float: left; }
  166. [dir=rtl] md-input-container .md-input {
  167. float: right; }
  168. md-input-container .md-input:focus {
  169. outline: none; }
  170. md-input-container .md-input:invalid {
  171. outline: none;
  172. box-shadow: none; }
  173. md-input-container .md-input.md-no-flex {
  174. -webkit-box-flex: 0 !important;
  175. -webkit-flex: none !important;
  176. flex: none !important; }
  177. md-input-container .md-char-counter {
  178. text-align: right;
  179. padding-right: 2px;
  180. padding-left: 0; }
  181. [dir=rtl] md-input-container .md-char-counter {
  182. text-align: left; }
  183. [dir=rtl] md-input-container .md-char-counter {
  184. padding-right: 0; }
  185. [dir=rtl] md-input-container .md-char-counter {
  186. padding-left: 2px; }
  187. md-input-container .md-input-messages-animation {
  188. position: relative;
  189. -webkit-box-ordinal-group: 5;
  190. -webkit-order: 4;
  191. order: 4;
  192. overflow: hidden;
  193. clear: left; }
  194. [dir=rtl] md-input-container .md-input-messages-animation {
  195. clear: right; }
  196. md-input-container .md-input-messages-animation.ng-enter .md-input-message-animation {
  197. opacity: 0;
  198. margin-top: -100px; }
  199. md-input-container .md-input-message-animation, md-input-container .md-char-counter {
  200. font-size: 12px;
  201. line-height: 14px;
  202. overflow: hidden;
  203. -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  204. transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  205. opacity: 1;
  206. margin-top: 0;
  207. padding-top: 5px; }
  208. md-input-container .md-input-message-animation:not(.md-char-counter), md-input-container .md-char-counter:not(.md-char-counter) {
  209. padding-right: 5px;
  210. padding-left: 0; }
  211. [dir=rtl] md-input-container .md-input-message-animation:not(.md-char-counter), [dir=rtl] md-input-container .md-char-counter:not(.md-char-counter) {
  212. padding-right: 0; }
  213. [dir=rtl] md-input-container .md-input-message-animation:not(.md-char-counter), [dir=rtl] md-input-container .md-char-counter:not(.md-char-counter) {
  214. padding-left: 5px; }
  215. md-input-container:not(.md-input-invalid) .md-auto-hide .md-input-message-animation {
  216. opacity: 0;
  217. margin-top: -100px; }
  218. md-input-container .md-input-message-animation:not(.ng-animate) {
  219. opacity: 0;
  220. margin-top: -100px; }
  221. md-input-container .md-input-message-animation.ng-enter {
  222. opacity: 0;
  223. margin-top: -100px; }
  224. md-input-container.md-input-focused label:not(.md-no-float), md-input-container.md-input-has-placeholder label:not(.md-no-float), md-input-container.md-input-has-value label:not(.md-no-float) {
  225. -webkit-transform: translate3d(0, 6px, 0) scale(0.75);
  226. transform: translate3d(0, 6px, 0) scale(0.75);
  227. -webkit-transition: width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s;
  228. transition: width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s;
  229. transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s;
  230. transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s; }
  231. md-input-container.md-input-has-value label {
  232. -webkit-transition: none;
  233. transition: none; }
  234. md-input-container.md-input-focused .md-input,
  235. md-input-container .md-input.ng-invalid.ng-dirty,
  236. md-input-container.md-input-resized .md-input {
  237. padding-bottom: 0;
  238. border-width: 0 0 2px 0; }
  239. md-input-container .md-input[disabled],
  240. [disabled] md-input-container .md-input {
  241. background-position: bottom -1px left 0;
  242. background-size: 4px 1px;
  243. background-repeat: repeat-x; }
  244. md-input-container.md-icon-float {
  245. -webkit-transition: margin-top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  246. transition: margin-top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
  247. md-input-container.md-icon-float > label {
  248. pointer-events: none;
  249. position: absolute; }
  250. md-input-container.md-icon-float > md-icon {
  251. top: 8px;
  252. left: 2px;
  253. right: auto; }
  254. [dir=rtl] md-input-container.md-icon-float > md-icon {
  255. left: auto; }
  256. [dir=rtl] md-input-container.md-icon-float > md-icon {
  257. right: 2px; }
  258. md-input-container.md-icon-left > label:not(.md-no-float):not(.md-container-ignore),
  259. md-input-container.md-icon-left > label .md-placeholder, md-input-container.md-icon-right > label:not(.md-no-float):not(.md-container-ignore),
  260. md-input-container.md-icon-right > label .md-placeholder {
  261. width: calc(100% - 36px - 18px); }
  262. md-input-container.md-icon-left {
  263. padding-left: 36px;
  264. padding-right: 0; }
  265. [dir=rtl] md-input-container.md-icon-left {
  266. padding-left: 0; }
  267. [dir=rtl] md-input-container.md-icon-left {
  268. padding-right: 36px; }
  269. md-input-container.md-icon-left > label {
  270. left: 36px;
  271. right: auto; }
  272. [dir=rtl] md-input-container.md-icon-left > label {
  273. left: auto; }
  274. [dir=rtl] md-input-container.md-icon-left > label {
  275. right: 36px; }
  276. md-input-container.md-icon-right {
  277. padding-left: 0;
  278. padding-right: 36px; }
  279. [dir=rtl] md-input-container.md-icon-right {
  280. padding-left: 36px; }
  281. [dir=rtl] md-input-container.md-icon-right {
  282. padding-right: 0; }
  283. md-input-container.md-icon-right > md-icon:last-of-type {
  284. margin: 0;
  285. right: 2px;
  286. left: auto; }
  287. [dir=rtl] md-input-container.md-icon-right > md-icon:last-of-type {
  288. right: auto; }
  289. [dir=rtl] md-input-container.md-icon-right > md-icon:last-of-type {
  290. left: 2px; }
  291. md-input-container.md-icon-left.md-icon-right {
  292. padding-left: 36px;
  293. padding-right: 36px; }
  294. md-input-container.md-icon-left.md-icon-right > label:not(.md-no-float):not(.md-container-ignore),
  295. md-input-container.md-icon-left.md-icon-right > label .md-placeholder {
  296. width: calc(100% - (36px * 2)); }
  297. .md-resize-wrapper {
  298. position: relative; }
  299. .md-resize-wrapper:after {
  300. content: '';
  301. display: table;
  302. clear: both; }
  303. .md-resize-handle {
  304. position: absolute;
  305. bottom: -5px;
  306. left: 0;
  307. height: 10px;
  308. background: transparent;
  309. width: 100%;
  310. cursor: ns-resize; }
  311. @media screen and (-ms-high-contrast: active) {
  312. md-input-container.md-default-theme > md-icon {
  313. fill: #fff; } }