textField.css 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.9.0-rc1-master-3c0ce9b
  6. */
  7. /* mixin definition ; sets LTR and RTL within the same style call */
  8. md-input-group label, .md-input-group label {
  9. display: block;
  10. font-size: 1.2rem; }
  11. md-input-group textarea, md-input-group input[type="text"], md-input-group input[type="password"], md-input-group input[type="datetime"], md-input-group input[type="datetime-local"], md-input-group input[type="date"], md-input-group input[type="month"], md-input-group input[type="time"], md-input-group input[type="week"], md-input-group input[type="number"], md-input-group input[type="email"], md-input-group input[type="url"], md-input-group input[type="search"], md-input-group input[type="tel"], md-input-group input[type="color"], .md-input-group textarea, .md-input-group input[type="text"], .md-input-group input[type="password"], .md-input-group input[type="datetime"], .md-input-group input[type="datetime-local"], .md-input-group input[type="date"], .md-input-group input[type="month"], .md-input-group input[type="time"], .md-input-group input[type="week"], .md-input-group input[type="number"], .md-input-group input[type="email"], .md-input-group input[type="url"], .md-input-group input[type="search"], .md-input-group input[type="tel"], .md-input-group input[type="color"] {
  12. display: block;
  13. border-width: 0 0 1px 0;
  14. padding-top: 2px;
  15. line-height: 26px;
  16. padding-bottom: 1px; }
  17. md-input-group textarea:focus, md-input-group input[type="text"]:focus, md-input-group input[type="password"]:focus, md-input-group input[type="datetime"]:focus, md-input-group input[type="datetime-local"]:focus, md-input-group input[type="date"]:focus, md-input-group input[type="month"]:focus, md-input-group input[type="time"]:focus, md-input-group input[type="week"]:focus, md-input-group input[type="number"]:focus, md-input-group input[type="email"]:focus, md-input-group input[type="url"]:focus, md-input-group input[type="search"]:focus, md-input-group input[type="tel"]:focus, md-input-group input[type="color"]:focus, .md-input-group textarea:focus, .md-input-group input[type="text"]:focus, .md-input-group input[type="password"]:focus, .md-input-group input[type="datetime"]:focus, .md-input-group input[type="datetime-local"]:focus, .md-input-group input[type="date"]:focus, .md-input-group input[type="month"]:focus, .md-input-group input[type="time"]:focus, .md-input-group input[type="week"]:focus, .md-input-group input[type="number"]:focus, .md-input-group input[type="email"]:focus, .md-input-group input[type="url"]:focus, .md-input-group input[type="search"]:focus, .md-input-group input[type="tel"]:focus, .md-input-group input[type="color"]:focus {
  18. outline: 0; }
  19. md-input-group input, md-input-group textarea, .md-input-group input, .md-input-group textarea {
  20. background: none; }
  21. md-input-group, .md-input-group {
  22. padding-bottom: 2px;
  23. margin: 10px 0 8px 0;
  24. position: relative;
  25. display: block; }
  26. md-input-group label, .md-input-group label {
  27. font-size: 1.6rem;
  28. z-index: 1;
  29. pointer-events: none;
  30. -webkit-font-smoothing: antialiased; }
  31. md-input-group label:hover, .md-input-group label:hover {
  32. cursor: text; }
  33. md-input-group label, .md-input-group label {
  34. -webkit-transform: translate3d(0, 22px, 0);
  35. transform: translate3d(0, 22px, 0);
  36. transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
  37. transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
  38. -webkit-transform-origin: left center;
  39. transform-origin: left center; }
  40. html[dir=rtl] md-input-group label, html[dir=rtl] .md-input-group label {
  41. -webkit-transform-origin: left center;
  42. transform-origin: left center;
  43. -webkit-transform-origin: right center;
  44. transform-origin: right center; }
  45. md-input-group input, md-input-group textarea, .md-input-group input, .md-input-group textarea {
  46. border-bottom-width: 1px;
  47. transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1); }
  48. md-input-group.md-input-focused label, .md-input-group.md-input-focused label {
  49. -webkit-transform: translate3d(0, 4px, 0) scale(0.75);
  50. transform: translate3d(0, 4px, 0) scale(0.75);
  51. -webkit-transform-origin: left center;
  52. transform-origin: left center; }
  53. html[dir=rtl] md-input-group.md-input-focused label, html[dir=rtl] .md-input-group.md-input-focused label {
  54. -webkit-transform-origin: left center;
  55. transform-origin: left center;
  56. -webkit-transform-origin: right center;
  57. transform-origin: right center; }
  58. md-input-group.md-input-focused input, md-input-group.md-input-focused textarea, .md-input-group.md-input-focused input, .md-input-group.md-input-focused textarea {
  59. border-bottom-width: 2px; }
  60. md-input-group.md-input-focused input, .md-input-group.md-input-focused input {
  61. padding-bottom: 0; }
  62. md-input-group.md-input-has-value label, .md-input-group.md-input-has-value label {
  63. -webkit-transform: translate3d(0, 4px, 0) scale(0.75);
  64. transform: translate3d(0, 4px, 0) scale(0.75);
  65. -webkit-transform-origin: left center;
  66. transform-origin: left center; }
  67. html[dir=rtl] md-input-group.md-input-has-value label, html[dir=rtl] .md-input-group.md-input-has-value label {
  68. -webkit-transform-origin: left center;
  69. transform-origin: left center;
  70. -webkit-transform-origin: right center;
  71. transform-origin: right center; }
  72. md-input-group.md-input-has-value:not(.md-input-focused) label, .md-input-group.md-input-has-value:not(.md-input-focused) label {
  73. -webkit-transform: translate3d(0, 4px, 0) scale(0.75);
  74. transform: translate3d(0, 4px, 0) scale(0.75);
  75. -webkit-transform-origin: left center;
  76. transform-origin: left center; }
  77. html[dir=rtl] md-input-group.md-input-has-value:not(.md-input-focused) label, html[dir=rtl] .md-input-group.md-input-has-value:not(.md-input-focused) label {
  78. -webkit-transform-origin: left center;
  79. transform-origin: left center;
  80. -webkit-transform-origin: right center;
  81. transform-origin: right center; }
  82. md-input-group[disabled] input, md-input-group[disabled] textarea, .md-input-group[disabled] input, .md-input-group[disabled] textarea {
  83. border-bottom-width: 0px; }
  84. md-input-group[disabled] input, md-input-group[disabled] textarea, .md-input-group[disabled] input, .md-input-group[disabled] textarea {
  85. background-size: 3px 1px;
  86. background-position: 0 bottom;
  87. background-size: 2px 1px;
  88. background-repeat: repeat-x;
  89. pointer-events: none; }
  90. md-input-group[disabled] label, .md-input-group[disabled] label {
  91. -webkit-transform: translate3d(0, 4px, 0) scale(0.75);
  92. transform: translate3d(0, 4px, 0) scale(0.75);
  93. -webkit-transform-origin: left center;
  94. transform-origin: left center; }
  95. html[dir=rtl] md-input-group[disabled] label, html[dir=rtl] .md-input-group[disabled] label {
  96. -webkit-transform-origin: left center;
  97. transform-origin: left center;
  98. -webkit-transform-origin: right center;
  99. transform-origin: right center; }
  100. md-input-group[disabled] *:not(.md-input-has-value) label, .md-input-group[disabled] *:not(.md-input-has-value) label {
  101. -webkit-transform: translate3d(0, 22px, 0);
  102. transform: translate3d(0, 22px, 0);
  103. transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
  104. -webkit-transform-origin: left center;
  105. transform-origin: left center; }
  106. html[dir=rtl] md-input-group[disabled] *:not(.md-input-has-value) label, html[dir=rtl] .md-input-group[disabled] *:not(.md-input-has-value) label {
  107. -webkit-transform-origin: left center;
  108. transform-origin: left center;
  109. -webkit-transform-origin: right center;
  110. transform-origin: right center; }